文字溢出時,實現在末尾顯示三個點省略效果
阿新 • • 發佈:2017-10-05
png code nowrap -o .com 會有 mage order ips
有時我們會有這樣的需求:當文本內容較多,寬度超出父容器時,就在最後顯示三個點,代表還有東西被折疊起來了。如下圖
具體實現
HTML 如下
1 <div> 2 <p>我是文字我是文字我是文字我是文字</p> 3 </div>
div 樣式如下
1 div { 2 width: 200px; 3 margin: 100px auto; 4 border: 1px solid #CCCCCC; 5 }
簡單加了個邊框,然後居中方便截圖,然後給了個寬度,作為文本寬度的限制
p 的樣式如下
1 p { 2 white-space: nowrap; 3 text-overflow: ellipsis; 4 overflow: hidden; 5 }
第 2 行表示強制在一行顯示,如果不強制在一行顯示,超出容器寬度的內容換行顯示,父容器直接被撐高,就沒有溢出了;
第 3 行表示在溢出時顯示省略標記,也就是圖中紅線圈出來的三個點,這個就沒啥好說的了;
第 4 行表示溢出部分內容隱藏,不溢出隱藏的話.... 第 3 行的溢出設置還有啥用,我都直接顯示到父容器外面了啊餵!
END~~~≥ω≤
文字溢出時,實現在末尾顯示三個點省略效果