CSS Text 一行是指將文本內容限制在一行內,如果文本內容過長則自動省略。
在CSS中,我們可以使用text-overflow屬性來實現這個效果。其中,text-overflow屬性需要和white-space和overflow一起使用,才能達到我們想要的效果。
/*單行文本溢出省略*/ div { white-space: nowrap; //不換行 overflow: hidden; //溢出隱藏 text-overflow: ellipsis; //省略號表示文本溢出 }
需要注意的是,text-overflow屬性只對block和inline-block元素生效,因此需要將需要設置的文本內容包含在這些元素中。
另外,如果我們想要在文本內容溢出時,顯示自定義的省略符,可以使用::after偽元素,并結合content屬性來實現。
/*自定義省略符*/ div::after { content: "..."; //省略號 }
這樣,當文本內容溢出時,就會顯示自定義的省略符,而不是默認的“...”。