CSS是一種用來控制網頁樣式的語言，通過CSS我們可以美化網頁的字體、顏色、布局等等。在某些情況下，我們會遇到文本內容超出了指定的寬度，這會導致頁面的排版出現不正常的情況。
為了解決這個問題，我們可以使用CSS的文本溢出屬性（text-overflow）。使用text-overflow屬性可以將多余的文本隱藏或者顯示省略號。下面我們來看看如何實現。
1. 使用省略號隱藏多余文本
如果想要隱藏多余的文本內容，我們可以使用以下代碼：
```
p {
white-space: nowrap; /*強制一行內顯示*/
overflow: hidden; /*超出部分隱藏*/
text-overflow: ellipsis; /*后面使用省略號表示溢出*/
}
```
2. 使用省略號顯示多余文本
如果想要顯示多余的文本內容，我們可以使用以下代碼：
```
p {
width: 300px; /*指定p標簽的寬度*/
overflow: hidden; /*超出部分隱藏*/
text-overflow: clip; /*超出部分直接裁剪*/
display: -webkit-box; /*將塊容器解析為彈性伸縮盒*/
-webkit-box-orient: vertical; /*設置盒子的垂直方向*/
-webkit-line-clamp: 3; /*限制顯示的行數*/
word-break: break-all; /*超出邊界自動換行*/
}
```
以上代碼中，-webkit-box-orient設置為vertical表示將內容從垂直方向進行排列，并且限制顯示的行數為3行。word-break屬性用于超出邊界自動換行，使得文本可以正常顯示。
在代碼部分，我們同樣可以使用pre標簽，這樣可以保留代碼的格式。具體代碼實現如下：
```
.box {
width: 300px; /*指定容器寬度*/
height: 300px; /*指定容器高度*/
overflow: hidden; /*超出部分隱藏*/
text-overflow: ellipsis; /*后面使用省略號表示溢出*/
white-space: nowrap; /*強制一行內顯示*/
}上一篇css如何將一個圖片居中
下一篇css如何將form居中