单词之间存在连字符导致的内容换行问题？

Question

我有一段css文本，内容为

build 59-Port xxxxxxxx sssssss zzzzzzzzzzzzzzzzzzzzzz ffffffdddccc tggggggrrrrr

插入到标签的内容文本之后，显示上59和Port之间就会自动换行显示，如何阻止这个自动换行显示？
尝试过word-break: keep-all，仍然无法阻止其自动换行。

样式截图

Answer 1

word-break，顾名思义，用来断词。

你的问题里，有空格存在，明显不是一个单词，所以应该用 whitespace: nowrap。

Answer 2

你这个描述我觉得有点奇怪

我有一段css文本，内容为

build 59-Port xxxxxxxx sssssss zzzzzzzzzzzzzzzzzzzzzz ffffffdddccc tggggggrrrrr
插入到标签的内容文本之后

css文本,内容文本你是通过content属性插入的？通过截图来看应该不是，content属性只在::after, ::before伪元素上有效。

给的信息不足吧，复现不出来。

不想59-Port断开，可以<span style="display: inline-block">59-Port</span>

Answer 3

在英文中 - 代表的是连字符，一般在换行的时候，一个单词放不下，会将单词换成两行展示，并且通过连字符去连接，代表这个单词是一个词。

应该连字符的相关内容，可以看一下 CSS 的 hyphens 属性，demo

所以，默认的时候，如果你没设置换行，那么就默认就会通过 - 来判断换行了。

如果设置了 word-break:break-all; 这个，那么就会强制把一个词换行，而不考虑连字符。
https://linxz.github.io/tianyizone/word_break.html

如果一定要保持这个 59-Port 不换行，那么就单独给一个 span 去包含，然后让这个词组换行吧。