多行文字溢位隱藏
在做頁面的過程中,經常會遇到新聞標題的隱藏效果,在沒有學習溢位效果隱藏之前,總是手動輸入省略號來代表省略部分的內容,但是對於具有變化性質的網頁內容來說,這一點是不可取的,還是需要通過css來實現自動隱藏多餘內容的效果
1.給內容設定固定寬度,如果超出的文字則設定以下隱藏效果
2.首先,設定內容強制不換行
white-space 設定內容空白空間的處理
pre 強制內容不換行,多個空格可以識別
nowrap 強制內容不換行,只識別乙個空格
normal 預設值,瀏覽器預設效果,自動換行,空格只能識別乙個
pre-wrap 自動換行,識別多個空格
pre-line 跟normal一樣,只識別乙個空格,可識別換行
3.其次使用overflow: hidden;將超出的內容隱藏
overflow 設定元素溢位內容設定
visible 預設值(沒有效果)
hidden 溢位隱藏
auto 溢位變成滾動條
scroll 溢位變成滾動條,不管內容有沒有超出滾動條都顯示
延伸:overflow-x和overflow-y預設值是auto,兩者同時存在的效果與hidden效果
一樣,單設定乙個會出現滾動條
4.最後使用text-overflow:ellipsis;把隱藏內容設定為省略號
text-overflow 設定隱藏內容
clip 裁剪隱藏內容,預設值
ellipsis 設定隱藏內容變成省略號
在乙個寬高各為100畫素的文字框內輸入「湖北省新型冠狀病毒感染肺炎疫情防控指揮部通告」,令超出的內容用省略號代替
湖北省新型冠狀病毒感染肺炎疫情防控指揮部通告
多行文字的溢位隱藏不經常使用,1.相容性差;2.使用不靈活。因此在設定中不常用,這裡只是作為了解
1.display:-webkit-box;(必用屬性,將內容作為彈性盒模型顯示)
2.-webkit-box-orient:vertical; (必用屬性,設定盒子排列方式:垂直顯示)
3.-webkit-line-ciamp:數值;(顯示的行數)
4.overflow: hidden;
一、高考時間安排:教育部2023年3月31日公告,2023年全國普通高等學校招生統一考試(以下簡稱高考)延期乙個月舉行,考試時間為7月7日至8日。根據教育部公告要求,經綜合研判、審慎研究並商教育部同意,湖北省2023年高考時間為7月7日至8日。具體科目考試時間安排為:7月7日,語文9
:00至11
:30;數學15
:00至17
:00。7月8日,文科綜合/理科綜合9
:00至11
:30;外語15
:00至17
:00。
clamp 文字溢位隱藏
2.示例 overflowhidden overflow divclass overflow 一段文字,一段文字,一段文字,一段文字,一段文字,一段文字,一段文字,一段文字。div divid overflowhidden 一段長長的文字,一段長長的文字,一段長長的文字,一段長長的文字,一段長長的文...
HTML 文字元素
html5規範指出 使用元素應該完全從元素的語義出發。但是由於歷史遺留及使用者至上的原則,這種語義會寬鬆許多。元素名稱說明a 生成超連結 br強制換行 wbr可安全換行 b標記一段文字但不強調 strong 表示重要 i表示外文或科學術語 em表示強制 code 表示計算機 var表示程式輸出 sa...
HTML 文字元素
html5中支援的元素 html5元素週期表 h1h6 表示1級標題6級標題 段落,paragraphs lorem lorem,亂數假文,沒有任何實際含義的文字 沒有語義,僅用於設定樣式 以前 某些元素在顯示時會獨佔一行 塊級元素 而某些元素不會 行級元素 到了html5,已經棄用這種說法。預格式...