在網頁設計中,有時候需要控制文字的換行,這就需要用到 CSS 強制不換行的技巧。下面介紹一種比較常見的方法:
p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
上述代碼中,white-space: nowrap;
表示不換行,overflow: hidden;
表示溢出隱藏,text-overflow: ellipsis;
表示超出部分顯示省略號。
使用這個 CSS 技巧可以解決一些排版問題,例如在列表中顯示一些長標題時,如果不做處理,標題文字可能會超出容器的邊界,導致頁面排版混亂,使用上述代碼可以將超長部分省略。
需要注意的是,這個方法只適用于單行文字的情況,如果需要處理多行文字,可以使用word-break: break-all;
或word-wrap: break-word;
等屬性來強制分行。
上一篇css彩旗動態效果