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

Question

我有一段css文本，内容为

build 59-Port xxxxxxxx sssssss zzzzzzzzzzzzzzzzzzzzzz ffffffdddccc tggggggrrrrr

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

样式截图

Answer 1

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

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

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

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

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

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

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

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

Answer 4

看起来你在处理文本内容时遇到了换行问题。CSS中的word-break属性用于控制如何在元素内部分行文本。你提到的word-break: keep-all确实可以阻止某些字符（如连字符）的自动换行，但它不适用于所有情况。

在你的情况下，如果word-break: keep-all不起作用，可能是因为浏览器对某些特定字符或字符串的处理方式不同。对于CSS，没有直接的解决方案来完全控制自动换行，特别是当涉及到不同浏览器和字体时。

一个可能的解决方案是尝试使用JavaScript来处理文本，并手动添加或删除连字符以防止自动换行。这可能不是最优雅的解决方案，但它可以作为一种权宜之计。

如果你能提供更多关于你的HTML和CSS代码的详细信息，我可能能够提供更具体的帮助。例如，你可以分享包含问题文本的HTML元素以及任何相关的CSS样式。这将有助于更准确地诊断问题并提供更精确的解决方案。