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

css樣式怎麼實現超出隱藏

藏色散人
發布: 2023-01-07 11:42:45
原創
7141 人瀏覽過

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中文網其他相關文章!

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