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

Question

我有一个对话泡泡 class 当用户通过我的聊天发送消息时，我用它在聊天框中显示消息 client.The 用户在输入字段中输入，但如果用户输入大于气泡的高度或宽度，消息就出来了 bubble.I 想根据用户给出的消息扩大气泡大小。有帮助吗？

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: 200px; 和 min-height: 66px; 以及 display: inline-block; 以便气泡正确显示。

我还添加了一个margin-bottom: 25px;，这样它们之间就有了一个space。

这是 fiddle。

这是一个更新的 fiddle，可以处理单字长文本。它打破了单词 (word-wrap: break-word).

Answer 2

使用 min-width 而不是 width height

相同

设置max-width和overflow:hidden也很好，因为有些输入长行没有空格。

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

Auto adjusting <p> tag class according to the input given

html

css

chat