根据给定的输入自动调整<p>标签类

Question

我有一个语音气泡类，当用户通过我的聊天客户端发送消息时，我用它来在聊天框中显示消息。用户输入输入字段，但如果用户输入大于泡沫的高度或宽度，消息从泡沫中消失。我想根据用户给出的消息扩展泡泡大小。有什么帮助吗？

CSS代码：

.bubble {
    position: relative;
    width: 200px;
    height: 66px;
    padding: 2px;
    background: #1e88e5;
    font-size: 20px;
    color: black;
}

  .bubble:after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 41px;
    border-style: solid;
    border-width: 15px 11px 0;
    border-color: #1e88e5 transparent;
    display: block;
    width: 0;
    z-index: 1;
}

Answer 1

使用min-width代替width height

也是如此

最好设置max-width和overflow:hidden，因为有些人会输入没有空格的长行。

Answer 2

您应该使用min-width: 200px;和min-height: 66px;以及display: inline-block;，以便正确显示气泡。

我还添加了一个margin-bottom: 25px;，以便它们之间有空格。

这里是fiddle。

这是一个处理长单词文本的更新fiddle。它打破了这个词（word-wrap: break-word）。