寫頁面的時候會遇到當內容超出一行或多行時要裁切超出部分並顯示省略號的情況,這裡簡單記錄一下:
一行:
text-overflow:ellipsis;當物件內文字溢位時顯示省略標記
overflow:hidden;用於css隱藏超出內容
white-space: nowrap; 無論內容有多少,都不會自動換行(若不隱藏,則會超出父容器一排全部顯示)
多行:
-webkit-line-clamp:4 ;限制文字顯示4行
display: -webkit-box;物件作為彈性伸縮盒子模型顯示 。
-webkit-box-orient:vertical;設定或檢索伸縮盒物件的子元素的排列方式 。
text-overflow: ellipsis;在多行文字的情況下,用省略號隱藏超出範圍的文字。
上**:
lang="en">
charset="utf-8">
文字超過單行/多行時顯示省略號title>
#contain1
#contain2
style>
head>
id="contain1">
我常想在紛擾中尋出一點閑靜來,然而委實不容易。目前是這麼離奇,心裡是這麼蕪雜。
div>
id="contain2">
我常想在紛擾中尋出一點閑靜來,然而委實不容易。目前是這麼離奇,心裡是這麼蕪雜。
乙個人做到只剩了回憶的時候,生涯大概總要算是無聊了罷,但有時竟會連回憶也沒有。中國的做文章有軌範,世事也仍然是螺旋。
div>
body>
html>預覽顯示:
需要的朋友直接複製**即可驗證。有不對的地方希望大家能夠指出。
關於文字單行或多行顯示省略號。
在移動端寫前端的時候,經常會遇到,需要將文字設定成一行或者多行顯示,多餘的字程式設計省略號的問題 一行顯示 pwhite space nowrap 這個屬性宣告建立布局過程中如何處理元素中的空白符 normal 預設。空白會被瀏覽器忽略。pre 空白會被瀏覽器保留。其行為方式類似 html 中的標籤...
單行與多行文字顯示省略號
1 單行文字顯示省略號 html 我的熱情,好像一把火,燃燒了整個沙漠 css p2 多行文字顯示省略號 html 核爆神曲 中文詞 遠處的濃烈硝煙,點綴著寂寞荒原像筆尖 一點一點,畫出崎嶇的曲線。夕陽下你的側臉 漸行漸遠,只剩懦弱的我,躲在鏡子裡面。血的傷痛,淚的洶湧,狂風之中撕裂。溫柔微笑,溫柔...
文字單行省略號 多行出現省略號
第一種僅支援單行省略 width value overflow hidden text overflow ellipsis white space nowrap 第二種支援多行省略 width value overflow hidden text overflow ellipsis display ...