首頁 > web前端 > css教學 > css怎麼限製文字字數

css怎麼限製文字字數

王林
發布: 2020-11-30 15:53:39
原創
6201 人瀏覽過

css限製文字字數的方法:先在標籤中將overflow屬性設為hidden;然後使用」white-space:nowrap「和」text-overflow:ellipsis「屬性設定文字超出寬度時隱藏即可。

css怎麼限製文字字數

本教學操作環境:windows10系統、css3版,此方法適用於所有品牌電腦。

(學習影片分享:css影片教學

#css限製文字字數的方法:

具體方法如下所示:

新建一個html文件,命名為test.html,用於講解CSS如何限制顯示的文字字數

css怎麼限製文字字數

在test.html文件內,使用p標籤建立一行文字,用於測試。

css怎麼限製文字字數

在test.html檔案內,給p標籤設定一個class屬性,用來設定樣式。

css怎麼限製文字字數

在css標籤內,透過class設定p標籤的樣式,定義其寬度為100px,高度為100px。

css怎麼限製文字字數

在css標籤內,再將overflow屬性設為hidden,實作文字超過寬度時隱藏。同時,使用「white-space:nowrap」和「text-overflow:ellipsis」設定文字超過寬度時,隱藏並以省略號顯示。

css怎麼限製文字字數

在瀏覽器中開啟test.html文件,查看實現的效果。

css怎麼限製文字字數

相關推薦:CSS教學

#

以上是css怎麼限製文字字數的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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