首頁  >  文章  >  web前端  >  css樣式怎麼實現超出隱藏

css樣式怎麼實現超出隱藏

藏色散人
藏色散人原創
2021-07-10 11:37:417071瀏覽

css樣式實作超出隱藏的方法:先建立一個HTML範例檔案;然後透過「overflow: hidden;text-overflow: ellipsis;」設定文字超出隱藏效果即可。

css樣式怎麼實現超出隱藏

本文操作環境:windows7系統、HTML5&&CSS3版,DELL G3電腦

css樣式怎麼實現超出隱藏?

#css樣式超出部分省略號

width: 30px;
overflow: hidden;   //隐藏
white-space: nowrap;  //不换行
text-overflow: ellipsis; //超出部分省略号

定義和用法:
white-space 屬性設定如何處理元素內的空白。
可能的值:

描述
normal 默認,空白會被瀏覽器忽略
pre #空白會被瀏覽器保留。其行為方式類似於HTML中的pre標籤
nowrap 文字不換行,文字會在同一行上繼續,直到遇到
標籤為止
pre-wrap 保留空白序列,但是正常地進行換行
inherit 規定應該從父元素繼承white-space屬性的值

text-overflow 屬性規定當文字溢位包含元素時所發生的事情。

##string適用給定的字串來代表被修剪的文本
描述
#clip 默認,修剪文字
ellipsis 顯示省略號代表省略的文字
#推薦學習:《

css視頻教程

以上是css樣式怎麼實現超出隱藏的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
上一篇:css怎麼做半圓下一篇:css怎麼做半圓