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>

要么 word-break: break-all

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

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