CSS 如何使文本不中断

在网页中，文本内容往往会因为浏览器窗口大小的变化而产生中断，例如单词被分开显示在两行。为了解决这个问题，CSS 提供了一些方法可以让文本不中断，保持整体性。

1. 使用 white-space: nowrap;

在 CSS 中，white-space 属性可以控制文本中空格的处理方式。将其设置为 nowrap 可以强制文本不换行而在一行内显示。

p {
  white-space: nowrap;
}

2. 使用 word-break: keep-all;

如果你希望文本分行显示，但是不希望单词被中断，可以使用 word-break: keep-all; 属性。

p {
  word-break: keep-all;
}

3. 使用 text-overflow: ellipsis;

在一些情况下，文字可能太长而无法全部显示在一个元素中，此时可以使用 text-overflow 属性来控制溢出文本的处理方式。将其设置为 ellipsis 可以在文本溢出时显示省略号。

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

结语

通过以上方法，你可以在网页中使文本更整洁、美观，更好地展现你的内容。