CSS文本中如何防止带连字符的单词换行？

在网页文本排版场景中，带连字符的长单词比如"self-driving"、"state-of-the-art"等，默认情况下可能会根据容器宽度自动换行，导致连字符出现在行首或者单词被不合理拆分，影响阅读体验。我们可以通过CSS的相关属性来控制这类单词的换行行为。

相关CSS属性介绍

word-break属性

word-break属性用于指定文本在单词内如何换行，常用取值有以下几个：

• normal：使用浏览器默认的换行规则，对于带连字符的单词，可能会在连字符处换行。
• break-all：允许在任意字符间断行，包括单词内部，会强制拆分长单词。
• keep-all：不允许在单词内换行，对于中文、日文、韩文文本不会在字符间断行，对于英文长单词也不会拆分，但是带连字符的单词可能仍然会在连字符处换行。

white-space属性

white-space属性用于设置如何处理元素内的空白和换行，部分取值会影响单词的换行逻辑：

• normal：默认处理方式，合并多余空白，文本自动换行。
• nowrap：文本不会换行，会在同一行上继续显示，直到遇到<br>标签为止。
• pre：保留空白符序列，文本只在换行符处换行。

hyphens属性

hyphens属性用于控制单词的连字符换行规则，取值如下：

• none：单词换行时不会添加连字符，也不会在已有连字符处优先换行。
• manual：默认取值，只在单词中已有的手动连字符（&shy;）处换行，不会自动添加连字符。
• auto：浏览器可以根据规则自动在单词换行处添加连字符，同时也会优先在已有连字符处换行。

防止带连字符单词换行的具体方案

方案一：禁止所有单词内换行

如果希望带连字符的单词完全不换行，保持完整显示，可以设置word-break: keep-all配合white-space: nowrap，不过white-space: nowrap会导致整个文本不换行，适合单行文本场景。

/* 单行文本场景，防止带连字符单词换行 */
.single-line-text {
    white-space: nowrap;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis; /* 超出部分显示省略号 */
}

方案二：允许文本换行但保留带连字符单词完整

如果是多行文本场景，希望文本正常换行，但是带连字符的单词不被拆分，可以设置word-break: keep-all，同时不限制white-space为nowrap，这样文本会在空格处换行，长单词不会被拆分。

/* 多行文本场景，保留带连字符单词完整 */
.multi-line-text {
    word-break: keep-all;
    white-space: normal;
    width: 200px; /* 设置容器宽度方便测试 */
    border: 1px solid #ccc;
    padding: 10px;
}

对应的HTML测试代码：

<div class="multi-line-text">
    这是一个测试文本，包含带连字符的单词 self-driving 和 state-of-the-art，看看是否会换行拆分。
</div>

方案三：控制连字符换行的优先级

如果不希望带连字符的单词在连字符处换行，可以设置hyphens: none，这样浏览器不会优先在连字符处换行，也不会自动添加连字符。

/* 禁止在连字符处优先换行 */
.no-hyphen-break {
    hyphens: none;
    width: 200px;
    border: 1px solid #ccc;
    padding: 10px;
}

不同方案的适用场景

我们可以通过下面的表格来对比不同方案的适用场景：

注意事项

需要注意word-break: keep-all在部分浏览器中对英文单词的处理可能存在差异，测试时建议多浏览器验证。另外如果容器宽度过小，即使设置了相关属性，长单词也可能会被强制拆分，此时可以适当调整容器宽度或者字体大小来适配。

如果需要在特定位置允许单词换行，可以在对应位置插入<wbr>标签或者软连字符&shy;，手动控制换行点。

CSSword_breakwhite_spacehyphens修改时间：2026-07-06 16:45:33