CSS控制文本溢出隱藏 CSS提供了很多方法來控制文本在元素框內的顯示方式。有時候，當文本內容過多時，我們希望文本超出元素框的部分不顯示，而是隱藏起來，這時就需要用到文本溢出隱藏的方法。 文本溢出隱藏可以通過以下3種方式實現。 1. 使用text-overflow屬性 text-overflow屬性用于控制文本超出元素框后的顯示方式。常見的取值有： - "clip"：超出部分將被裁剪掉； - "ellipsis"：超出部分將以省略號（...）代替； - "string"：超出部分將以指定的字符串代替。 一般情況下，text-overflow屬性需要和overflow屬性一起使用，將元素框的溢出部分隱藏起來。如下代碼所示：

p {
width: 200px;
white-space: nowrap; /* 文本不換行 */
overflow: hidden; /* 溢出部分隱藏 */
text-overflow: ellipsis; /* 超出部分以省略號代替 */
}

其中，white-space屬性用于控制文本的換行方式。當其取值為nowrap時，文本不會被自動換行。 2. 使用max-width屬性 max-width屬性用于限制元素框的最大寬度。當文本內容超過最大寬度時，將自動被隱藏。如下代碼所示：

p {
max-width: 200px;
overflow: hidden; /* 溢出部分隱藏 */
}

3. 使用彈性布局 使用彈性布局可以讓元素框自適應文本內容的寬度，同時使超出部分隱藏。如下代碼所示：

p {
display: flex;
justify-content: center; /* 橫向居中 */
align-items: center; /* 縱向居中 */
overflow: hidden; /* 溢出部分隱藏 */
}

這種方法不適用于所有場景，需要根據實際情況進行選擇。 總結 以上3種方法可以讓我們實現文本溢出隱藏的效果，但各自適用于不同的場景。需要根據具體情況進行選擇。同時，還需要注意控制文本的換行方式和字體大小，以保證元素框內的文本顯示效果。