html - css:内联 css 以阻止内容调整父级大小

Question

我有一个随机生成的内容，它极大地调整了元素的大小。我通过 javascript pusher.js 库接收实时消息

<span class="msg" style="font-style:italic;width:30%;min-wdith:30%;max-width:30%;"> random length msg here </span><br>

我试图将它固定在 30%，但每当文本字符串 msg 变得超长时，跨度最终会水平延伸到页面的远端

这是有问题的，因为当消息速率增加时，元素“跳舞”

Answer 1

您需要将 span 的 display 属性更改为 inline-block

Demo

.msg{
  display: inline-block;
}