line-break：詳解換行符

一、什麼是line-break

Line-break是一種常見的控制前端文本內容格式的方式。當我們的文本內容中包含了超出所在容器寬度的字元時，我們可以使用line-break來實現自動換行，讓文本內容在視覺上更加美觀。

二、line-break的類型

line-break主要有兩種類型：normal和break-all。

normal類型是默認類型，文本內容會根據空格或斷字點處進行自動的換行，每行文本長度盡量相等。

break-all類型會強制進行換行，不管是否有空格或斷字點。

三、使用line-break實現文字截斷

在一些場景中，我們需要將過長的文本內容截斷顯示。這時候，我們可以設置文本內容的長度，再使用line-break進行換行處理，以達到截斷的效果。

.ellipsis-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-break: after-white-space;
    max-width: 100%;
}

四、使用line-break實現文字在行內自動換行

有些場景中，文字需要在一行內多次換行。我們可以使用line-break，使得文字按照自己選擇的位置進行換行，以達到視覺上更好的排版效果。

.line-break-test {
    width: 200px;
    height: 100px;
    overflow: hidden;
    text-align: justify;
    text-justify: inter-word;
    font-size: 20px;
    line-height: 30px;
}

.line-break-test span {
    line-break: normal;
}

五、使用line-break處理多語言文本溢出問題

在一些需要支持多語言的場景中，存在著不同語言在文本長度上的差異。這時候，我們需要使用line-break來進行文本長度的調整，從而以適應各種語言的顯示需要。

.multi-language-text {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    max-height: 50px;
    font-size: 16px;
    line-height: 1.5;
    -webkit-line-clamp: 2;   /* 兩行文字 */
    line-break: after-white-space;   /* 文字內容必須完整 */
}

六、使用line-break處理長串數字文本的換行問題

在某些需要顯示長串數字的場景中，如果數字位數較多，就會導致文本溢出問題。這時候，我們可以使用line-break，讓數字按照我們期望的位置進行換行，以達到視覺上更佳的效果。

.number-text {
    display: inline-block;
    max-width: 100%;
    line-height: 1.4;
    word-break: break-all;
    line-break: after-white-space;
}