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超长时，跨度最终会延伸到页面的远端水平

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

Answer 1

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

Demo

.msg{
  display: inline-block;
}