lensh / vue-qq

🎨 Vue family bucket with socket.io and express/koa2 , create a web version of mobile QQ, supporting real-time group chat, real-time private chat, special care, shielding chat, smart IP geographic location, real-time display temperature and other QQ core functions
MIT License
917 stars 230 forks source link

几个CSS属性 #7

Open lensh opened 6 years ago

lensh commented 6 years ago

(1)css设置文本超出时显示省略号:

        overflow:hidden;  /*内容超出后隐藏*/
        text-overflow:ellipsis; /*当文本溢出时显示省略标记(...)*/
        white-space:nowrap;  /*文本不换行*/

(2)word-wrap和word-break word-wrap 属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。属性值为break-word时表示单词过长时强制断句换行显示。换句话说,word-wrap 是用来决定允不允许单词内断句的,如果不允许的话长单词就会溢出。最重要的一点是它还是会首先尝试挪到下一行,看看下一行的宽度够不够,不够的话就进行单词内的断句。 word-break 属性用来标明怎么样进行单词内的断句。当属性值为break-all时,它不会尝试把长单词挪到下一行,而是直接进行单词内的断句。使用break-all会更节省空间。

word-wrap:break-word;
word-break:break-all;