学习《css世界》笔记之使用overflow做文字溢出点点点效果
生活随笔
收集整理的這篇文章主要介紹了
学习《css世界》笔记之使用overflow做文字溢出点点点效果
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
效果圖
HTML
CSS
.p1{width: 200px;text-overflow: ellipsis;white-space: normal;overflow: hidden;}.d1{width: 200px;border: 1px solid #FF0000;}.d1 p{overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;}ps:在p標(biāo)簽中使用全英文如
<p class="p1">qwertyuiopasdfghjklzxcvbnm</p>是不會自動換行的,需要修改p標(biāo)簽的換行規(guī)制,
p{word-wrap:break-word; // 或者 word-break: break-all; }釋義:
1.white-space:設(shè)置如何處理元素間的空白,默認(rèn)為normal,表示空白會被瀏覽器忽略,white-space: nowrap;表示不換行。
2.word-break:規(guī)定自動換行的處理方法。normal:使用瀏覽器默認(rèn)換行規(guī)則,break-all:允許在單詞內(nèi)換行,keep-all:只能在半角空格或連字符處換行。
3.word-wrap:允許長單詞或URL地址換行到下一行。normal:只在允許的斷字點(diǎn)換行(瀏覽器保持默認(rèn)處理),break-word:在長單詞或URL地址內(nèi)部進(jìn)行換行。
若兩個(gè)屬性同時(shí)存在,以word-break: break-all;為準(zhǔn)。
建議使用p標(biāo)簽測試時(shí),使用中文
總結(jié)
以上是生活随笔為你收集整理的学习《css世界》笔记之使用overflow做文字溢出点点点效果的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 《PMBOK第六版》章节知识点
- 下一篇: libjpeg-turbo 2.1.2