[分享]css中强制一行不换行显示

在 CSS 中，我们常常需要强制文本在一行内不换行显示，这在一些特定的需求下算是一种比较实用的技巧，下面就来介绍一下如何实现。/ 方式一：使用 whitespace 属性 / p { whitespa...

在 CSS 中，我们常常需要强制文本在一行内不换行显示，这在一些特定的需求下算是一种比较实用的技巧，下面就来介绍一下如何实现。

/* 方式一：使用 white-space 属性 */
p {
  white-space: nowrap; /* 强制不换行 */
}

/* 方式二：使用 word-break 属性 */
p {
  word-break: keep-all; /* 强制不换行 */
} 

这两种方式本质上是基于不同的 CSS 属性来实现的。

方式一是使用 white-space 属性，该属性可以控制文本的空白符如何处理，其中 nowrap 表示不折行，也就是说我们可以通过设置 white-space 为 nowrap 来强制文本在一行内不换行显示。

方式二是使用 word-break 属性，该属性用于控制单词如何换行，keep-all 则表示强制不在单词内换行。

需要注意的是，如果要使用方式二，需要将单词用中文标点符号隔开，否则无效。

另外，这两种方式在表格和排版布局等场景下也有着广泛的应用，使用起来还是比较简单的。