一、單詞換行
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/zh-tw/n/372460.html
微信掃一掃 
支付寶掃一掃 