[分享]css3文字换行的各类属性

CSS3文字换行的属性可以让我们更加方便地控制文字的排列和布局，下面介绍几种常见的属性。.wordwrap { wordwrap: breakword; } wordwrap这个属性可以让字体自动换行...

CSS3文字换行的属性可以让我们更加方便地控制文字的排列和布局，下面介绍几种常见的属性。

.word-wrap {
  word-wrap: break-word;
} 

word-wrap这个属性可以让字体自动换行，而不是在父级容器边缘处断开。当单词无法完全放入一行中时，该属性将在单词中断开，以确保单词间的文字不会移动到下一行。

.word-break {
  word-break: break-all;
} 

word-break属性指定了单词的断句方式。 break-all选项在单词任何位置断开，以适应其容器的宽度。其他选项包括keep-all（不允许单词中断）和break-word（和word-wrap相似，只在需要时断开单词）。

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

white-space属性可以控制空白符（空格、制表符和换行符）的处理方式。 nowrap选项指示浏览器不要在文本中自动换行，而是一直显示完整的内容。其他选项包括normal、pre、pre-wrap和pre-line。

.text-overflow {
  text-overflow: ellipsis;
} 

text-overflow属性指定了当文本被剪裁时如何显示省略标记"..."。ellipsis选项告诉浏览器在文本末尾显示省略号。其他选项包括clip（简单地裁剪文本）和string（在文本溢出时显示指定的字符串）。

使用这些属性可以轻松控制文字的换行和布局，让文本更加美观和易读。