首頁 > web前端 > css教學 > css實作文字不換行溢位顯示省略號

css實作文字不換行溢位顯示省略號

藏色散人
發布: 2020-11-20 11:16:12
原創
5941 人瀏覽過

css文字不換行溢出顯示省略號的實作方法:首先開啟css樣式表;然後透過屬性“white-space: nowrap;”實現文字強制不換行;接著透過“text-overflow:ellipsis;”實作文字溢位顯示省略號即可。

css實作文字不換行溢位顯示省略號

推薦:《css影片教學

1. 強制不換行

  • white-space: nowrap; 文字強制不換行;

  • text-overflow:ellipsis; 文字溢位顯示省略號;

  • overflow:hidden; 溢出的部分隱藏;

2. 自動換行

  • ##word-wrap: break-word;

  • word-break: normal;

#3.強制英文單字斷行

word-break: break-all;

 

 

 

#

以上是css實作文字不換行溢位顯示省略號的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板