文字元素溢位隱藏

2021-10-05 06:53:40 字數 1596 閱讀 4427

多行文字溢位隱藏

在做頁面的過程中,經常會遇到新聞標題的隱藏效果,在沒有學習溢位效果隱藏之前,總是手動輸入省略號來代表省略部分的內容,但是對於具有變化性質的網頁內容來說,這一點是不可取的,還是需要通過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,已經棄用這種說法。預格式...