Javascript 可扩展<；textarea>；具有自定义形状

如果我想创建一个具有演讲泡泡形状的文本区域（就像你在漫画中看到的那样），或者一个当文本输入到文本中时会根据需要扩展的思想泡泡，我应该怎么做

编辑：

嘿，伙计们，很抱歉之前我的问题不够清楚-尽管我确实得到了一些有用的回答。如果有一种方法可以给两个人打“对勾”，我会的，因为有两个人回答了我模棱两可的问题

我并不反对使用JS，但有人推荐的链接实际上非常接近我所需要的，尽管如此，第一次回复也给了我一个好主意。由于具有自定义包装的帖子将具有最大字符长度，我可能只会提出三种不同大小的相同样式，并根据帖子的长度使用它们

---

无论如何，谢谢你们的投入

这里有一个网站，可以帮助你做你想做的事。

---

尝试一个无边框的文本区域，其背景与您需要的背景图像的背景颜色相匹配

e、 g.您有一个div包装文本区域。该div具有圆角以形成圆形（例如，宽度：100px；边框收音机：50px；背景色：白色）。文本区域不能有边框，必须有相同的背景颜色，当然必须居中

这只是一个提示，还有许多其他的实现。

AFAIK

textarea

不用于分别监听内容更改和调整大小 （并非没有JS）这是我目前为止最好的建议：

<span class="bubble" contenteditable="true">Type here</span>

---

-1您尝试过什么？大多数（阅读-如果您制作了自己的浏览器，那么您将能够决定是否需要圆形、方形或3D）浏览器将文本区域限制为矩形，但您可以在其周围绘制任何东西，使其看起来像一个语音泡泡。很棒的链接！我很高兴能帮上忙。我从那个网站上学到了（而且还在学习）很多东西。唉，它似乎已经不复存在了。链接的危险只是答案

.bubble{
  position:relative;
  display: inline-block;
  padding: 15px;
  background: #ff9;
  font-family: "Comic Sans MS", cursive, sans-serif;
  text-transform: uppercase;
  color:#000;
  border:2px solid #000;
  border-radius:20px;
  outline:0;
}
.bubble:after{
  content: ' ';
  position:absolute;
  margin: 0 auto;
  left:0;
  right:0;
  bottom:-10px;
  width:15px;
  height:15px;
  background:#ff9;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(45deg);
}