Question

我想用html php和js（jQuery UI）开发漫画编辑工具，并且我需要一种使文本自动适应气泡的方法，气泡是椭圆形的文本区域或文本输入（{ 1}}）。我发现css-shapes周围有很多东西，但是看起来border-radius = 50%（对我的情况而言是完美的）似乎不起作用（不再吗？）。有什么办法可以做到这一点？

Answer 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>

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

1 个答案:

演示