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>

Answer 2

您需要为段落设置宽度，并使用“媒体查询”更改不同屏幕中的宽度

Answer 3

如果你希望用一个（或几个）特定字符的连字符进行除法，你可以插入­（=＆＃34;软连字符＆＃34;），也可以多次插入：

<span><em>GB15MIDL&shy;400515123&shy;1111456711&shy;11111118</em></span>

这会打破最后一句＆＃34; ­＆＃34;仍然适合这条线的位置。如果该行足够长，您将无法看到这些实体。