CSS 停止文本换行 - CSS

在 web 开发中，文本是页面中最基本也是最重要的组成部分之一。由于浏览器的自适应性，文本在不同窗口大小和设备上可能会出现自动换行的情况。然而，有时我们需要控制文本在指定宽度下不进行换行，以保持页面的布局和美观。那么，如何在 CSS 中实现文本不自动换行呢？

使用 white-space 属性

white-space 属性用于控制浏览器如何处理元素中的空格和换行符。它有以下几个可选值：

• normal：默认值，表示浏览器会自动处理空格和换行符；
• nowrap：表示元素中的文本不进行换行，直到遇到 <br> 标签；
• pre：表示在元素中保留空格和换行符，并遵循 HTML 中的空格和换行符；
• pre-wrap：表示在元素中保留空格和换行符，但是允许浏览器自动换行；
• pre-line：表示在元素中忽略空格，但是保留换行符，允许浏览器自动换行。

因此，可以通过将 white-space 属性的值设置为 nowrap 来实现在指定宽度下停止文本自动换行。

.no-wrap {
  white-space: nowrap;
}

上述代码将 .no-wrap 类中的元素文本设置为不进行换行，直到遇到 <br> 标签。

使用 word-break 属性

word-break 属性用于指定断字规则，可控制浏览器如何在单词或连续字母字符串中断开换行。它有以下几个可选值：

• normal：默认值，表示浏览器根据字母和单词长度自动换行；
• break-all：表示在单词或连续字母字符串中断开换行；
• keep-all：表示在不间断字符处换行（如中文等）。

因此，可以通过将 word-break 属性的值设置为 keep-all 来实现在指定宽度下停止文本自动换行。

.no-wrap {
  word-break: keep-all;
}

上述代码将 .no-wrap 类中的元素文本设置为在不间断字符处换行，从而实现了在指定宽度下停止文本自动换行。

综上，通过使用 white-space 或 word-break 属性，可以轻松地实现在指定宽度下停止文本自动换行，从而保持页面的布局和美观。