在網(wǎng)頁設(shè)計(jì)中，經(jīng)常會(huì)遇到一種情況，就是當(dāng)文本內(nèi)容超出了寬度時(shí)，網(wǎng)頁會(huì)自動(dòng)換行。這時(shí)，我們可以使用CSS來控制文本內(nèi)容的寬度，從而達(dá)到更好的展示效果。

p {
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

上述代碼是一種經(jīng)典的處理文本超出寬度的方法。首先，設(shè)置p標(biāo)簽的寬度為200px，然后設(shè)置溢出隱藏，即當(dāng)文本內(nèi)容超出200px時(shí)，將自動(dòng)隱藏。接著，設(shè)置文字不自動(dòng)換行，也就是不管文本內(nèi)容多長(zhǎng)，都只在一行上顯示，直到遇到CSS樣式中所定義的寬度限制。最后，設(shè)置超出部分的文本內(nèi)容以省略號(hào)表示，使其更顯得美觀。

除了以上說的ellipsis，text-overflow還有其他的屬性值：

• clip：文本超出部分被剪切掉
• string：文本超出部分用指定字符串代替

需要注意的是，當(dāng)使用text-overflow屬性時(shí)，必須同時(shí)設(shè)置white-space: nowrap，否則該屬性不會(huì)生效。

除此之外，還可以使用CSS3的屬性flex來進(jìn)行布局，如下：

.container {
display: flex;
overflow-x: scroll;
}
.item {
flex: 0 0 auto;
}

上述代碼中，我們將容器（.container）的屬性值設(shè)置為flex，使得子元素在其中可以自由調(diào)整大小與位置。同時(shí)，我們?cè)O(shè)置容器的溢出屬性為橫向滾動(dòng)。然后，我們?cè)诿總€(gè)子元素（.item）中設(shè)置一個(gè)flex: 0 0 auto，表示元素不會(huì)縮小或者放大，其寬度為其本身的大小。

總結(jié)來說，處理網(wǎng)頁文本超出寬度的方法有多種，上述代碼僅是其中的一部分，可以根據(jù)實(shí)際需求選擇適合自己的方法。