CSS英文自动换行

小蓝 • 2024-12-12 13:25 • 编程

英文单词没有空格，如果不加任何处理，英文单词将会一直持续到很远，导致页面排版混乱。需要使用CSS让长单词在遇到边界时自动换行。

对于普通情况下，建议使用word-break属性：

  p {
    word-break: break-all;
  }

上例中，我们将所有单词通过将单词段落包裹一层P标签，然后通过CSS属性word-break: break-all实现单词自动换行。

word-break属性最主要的效果是能够让长单词自动换行到下一行。

当出现长单词时，使用word-break:break-all属性可能会破坏单词的完整性，无法阅读。因此，我们可以在单词连字符连词符前面添加一个零宽空格来实现完整单词在换行时的出现。

  p {
    white-space: pre-wrap;
    word-wrap: break-word;
  }

上例中，我们使用CSS white-space属性和word-wrap属性，使文本能够根据容器宽度自动换行。white-space: pre-wrap的作用是保留空格和换行符，而word-wrap: break-word的作用是遇到长单词时自动换行。

WPS中的文字默认是自动换行的，因此不需要额外设置，除非特殊需要。

除了word-break属性，CSS中还有word-wrap属性，两者的区别在于：

  p {
    word-wrap: break-word;
  }

在Word中，如果开启了自动换行功能，则在文本框或文本区域中自动换行。如果想完全按照自己的意愿控制换行，则可以使用Ctrl + Enter手动换行，或者设置换行标识。

在CSS中，可以使用white-space和overflow两个属性来控制换行。如下所示：

  p {
    white-space: nowrap;
    overflow-wrap: break-word;
  }

上例中，white-space: nowrap使得单词不会自动换行，并且在容器宽度不够时会出现滚动条。overflow-wrap: break-word能够让单词自动换行到下一行。

如果在Word中想避免自动换行，可以通过以下几种方法实现：

默认情况下，数字和字母同样可以通过CSS的属性word-break进行换行：

  p {
    word-break: break-all;
    word-wrap: break-word;
  }

上例中，word-break能够让长数字或英文单词自动换行到下一行，而word-wrap可以在单词、数字或字符中间换行。

在Word中，可以在“文件”-“选项”-“校验”中设置换行规则，包括将句子中的单词断开和不断开单词。具体如下图所示：

在“校验”中勾选”不断开单词”选项，则Word输入的英文不会自动换行。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/248080.html