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

Question

我想开发一个在html php和js (jQuery用户界面)中的漫画编辑工具，我需要一种方法来使文本自动适应演讲气泡，这是一个椭圆文本区域或文本输入(与border-radius = 50%)。我在css-shapes周围发现了很多东西，但它看起来像是shape-inside，这对我的情况来说是完美的，却不能工作(不再？)。有什么方法可以做到这一点吗？

Answer 1

该演示包括：

• contenteditable字段集

• 不同的类叫喊和思考

当用户为typing.时，

• 使用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>

​