如何使文本适应椭圆文本区域或文本输入元素答案

【问题标题】：How to adapt a text to an elliptic textarea or text input element如何使文本适应椭圆文本区域或文本输入元素
【发布时间】：2018-06-19 23:27:59
【问题描述】：

我想在html php和js（jQuery UI）中开发一个漫画编辑工具，我需要一种让文本自动适应语音气泡的方法，即椭圆文本区域或文本输入（带有@987654322 @)。我在 css-shapes 周围发现了很多东西，但它看起来像 shape-inside，这对我的情况来说是完美的，但它不起作用（不再起作用了吗？）。有什么方法可以实现吗？

【问题讨论】：

嘿，你可以发布你的尝试吗？
你可以尝试在外面使用形状：developer.mozilla.org/en-US/docs/Web/CSS/shape-outside
我已经考虑过了，但我更喜欢一种有效的方法，如果它存在的话。与 shape-inside 应该做的相比，使用 shape-outside 需要大量计算。

标签： javascript html css jquery-ui css-shapes

【解决方案1】：

演示有：

contenteditable 字段集
大喊大叫和思考的不同课程
使用fit-content 符合其内容并在用户输入时扩展。

演示

.bubble {
  font: 400 100%/1.5 'Architects Daughter', cursive;
  position: relative;
  border-radius: 45%;
  width: fit-content;
  padding: .75em 1.5em;
  z-index: 1;
  background: #fff;
  margin: 1em;
  text-align: center;
}

.thought {
  position: absolute;
  bottom: -25px;
}

.YELL {
  font: 400 1.5rem/1.1 Impact;
}

.YELL legend {
  font-family: Arial
}

.speak {
  position: absolute;
  bottom: -.8em;
}

.fromCenter {
  left: 50%;
  transform: rotate(160deg)
}

.fromLeft {
  transform: rotate(150deg);
}

.fromRight {
  right: 0;
  transform: rotate(60deg)
}

.rightPanel {
  float: right
}

<link href="https://fonts.googleapis.com/css?family=Architects+Daughter" rel="stylesheet">

<fieldset class='bubble YELL rightPanel' contenteditable>
  HULK SMASH!!!
  <legend class='speak fromCenter'>&#923;</legend>
</fieldset>

<fieldset class='bubble' contenteditable>
  My spidey sense is tingling!
  <legend class='thought fromLeft'>Ooooo</legend>
</fieldset>

<fieldset class='bubble' contenteditable>
  I'm the best there is at what I do,<br> but what I do best isn't very nice.
  <legend class='thought fromRight'>Ooooo</legend>
</fieldset>

【讨论】：

这很有趣，如果我没有找到一种方法来做我想做的事情，我可能会使用它，即使文本适应椭圆，它的大小实际上是可编辑的，而不是反过来。
我明白了，也许可以尝试一下覆盖在 SVG 或画布上的无边框文本区域？
我想做一些类似的事情，但我实际上不需要视觉...这使它更容易...：[phraseit.net/]