一、单词换行
1、单词换行指的是在英文单词的断点处换行，对于阅读体验和排版美观很有帮助。实现方式:
.word-break {
word-break: break-all;
}
2、该方式将英文单词的断点作为换行点，适用于英文站点和长单词的排版。中文也可以使用该方式来进行单词换行。
.word-break {
word-break: break-all;
}
3、此外还有一个CSS3新属性word-wrap，可以将长单词强制分成多行来排版：
.word-wrap {
word-wrap: break-word;
}
二、字符换行
1、字符换行指的是在特定字符出现的位置进行换行，比如逗号、空格、破折号等。实现方式如下：
.char-break {
overflow-wrap: break-word;
word-wrap: break-word;
}
2、该方式将特定字符位置作为换行点，适用于中英文混排的网站。但是该方式容易导致行宽不一致，需谨慎使用。
三、强制换行
1、有时候需要在特定位置强制换行，比如标题段落等。可以使用CSS中的\n或\r强制换行。
.forced-break {
white-space: pre-line;
}
2、该方式将\n或\r作为强制换行符，在该处进行换行。适用于需要精细控制排版的场景。
四、多行文本溢出
1、对于长文本的溢出，可以使用CSS的text-overflow属性进行控制。该属性只对单行文本溢出生效。
.overflow-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
2、支持text-overflow的浏览器可以将多行文本溢出压缩成单行文本，并用省略号代替，以达到更好的视觉效果。
五、多行文本折叠
1、对于长段落的显示，可以使用CSS的line-clamp属性进行折叠，只显示指定行数的文本。
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
2、该方式只对支持-webkit-box的浏览器生效。可以指定折叠的行数和最大高度，达到美观的排版效果。
原创文章，作者：EXSCP，如若转载，请注明出处：https://www.506064.com/n/372460.html
微信扫一扫 
支付宝扫一扫 