【问题记录】html双横杠换行问题，white-space的重要性

废话 前言：

• 如图，就是这两个小玩意儿。两个 -- 同时出现在 html 就会傻逼地给你进行 智障 智能换行 。
• 前期，以为是浏览器把这个当做 英文单词的换行 来处理了，所以用 css 的 word-break: break-word; 一顿猛操作，发现毫无反应。。。
• 中期，谷歌或百度一下，怎么描述他两都看不懂。
• 后期，问了下ChatGPT，一点就通。

截图版答案

文字版解答

万一图片加载不出来，就看文字内容吧。

• Q：怎么解决 span 中两个 - 第二个换行的问题
• A：

如果您在 HTML 中使用元素，并且其中包含两个连字符，而第二个连字符在某些情况下会导致换行，您可以使用 CSS 样式来控制文本的行为。具体来说，您可以使用white-space属性来指定浏览器如何处理空格和换行符。

例如，如果您希望文本在遇到连字符时不自动换行，可以将white-space属性设置为nowrap。下面是一个示例：

<style>
    .no-wrap {
        white-space: nowrap;
    }
</style>

<span class="no-wrap">这是一段包含两个连字符的文本——一个在中间，另一个在结尾。</span>

在这个例子中，我们创建了一个 CSS 类 .no-wrap，并将其应用到元素中。该类指定white-space属性为nowrap，这将防止浏览器在遇到连字符时自动换行。因此，无论何时浏览器遇到包含两个连字符的文本，它都会将它们放在同一行上，而不会在第二个连字符处强制换行。

请注意，如果文本太长而无法适应容器的宽度，则仍然会出现自动换行。此外，如果您希望允许文本在单词边界上自动换行，但不希望在连字符处自动换行，则可以将white-space属性设置为pre-wrap。这将保留所有空格和换行符，但在连字符处仍允许自动换行。

• Q：css中的 white-space 和 word-break 有什么区别
• A：

white-space和word-break都是CSS中用来控制文本换行和断行的属性，但它们的作用不同。

white-space属性定义了浏览器如何处理元素中的空格和换行符。它有以下取值：

normal：浏览器会忽略多余的空格和换行符，并将文本压缩成一行。
nowrap：文本不会自动换行，除非遇到
或换行符。
pre：浏览器会保留多余的空格和换行符，并按照文本中的格式进行显示。
pre-wrap：浏览器会保留多余的空格和换行符，并允许文本自动换行。
pre-line：浏览器会忽略多余的空格和换行符，但允许文本自动换行。
word-break属性定义了浏览器如何处理单词中的断行。它有以下取值：

normal：浏览器会根据单词边界进行换行。
break-all：浏览器会忽略单词边界，强制将单词断开换行。
keep-all：浏览器不会在 CJK（中文、日文、韩文）文字中断行，但可以在非 CJK 文字中断行。
在实际应用中，white-space通常用来控制元素内文本的换行方式，而word-break用来控制单词的断行方式，特别是在处理非拉丁字符（如中文、日文、韩文）时会更加常用。同时，这两个属性也可以结合使用，以达到更精确的文本布局效果。

问题虽小，引以为戒

总结此文，避免以后再踩坑。