html - CSS不要让元素跑到外面

Question

我有一个包含以下元素的 html 列表:

<ul>
...
<li>Counter party: <span><em>GB15MIDL400515123111145671111111118</em></span></li>
...
</ul>
...

问题是当我用较小的屏幕可视化时，EM 值超出了列表的边界:

我可以在我的 css 上做些什么来获得边界内的 em 值。

Answer 1

您可以使用word-wrap: break-word

li {
  border: 1px solid black;
  width: 100px;
  word-wrap: break-word;
}

<ul>
  <li>Counter party: <span><em>GB15MIDL400515123111145671111111118</em></span></li>
</ul>

或者分词:break-all

li {
  border: 1px solid black;
  width: 100px;
  word-break: break-all;
}

<ul>
  <li>Counter party: <span><em>GB15MIDL400515123111145671111111118</em></span></li>
</ul>