`

单词超出隐藏显示省略号(单行或多行)并设置是否将单词打断

阅读更多

一、显示单行

p{
    width: 100px;/*宽度自己设置*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*文本单行超出隐藏显示省略号*/
/*这种方法会将单词打断,比如最后一个单词是interesting打断后就显示成了inter...*/

 

二、显示多行

p{
    width: 100px;/*宽度自己设置*/
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;/*数字就是想展示的行数,设置为1的时候就变成显示单行了*/
    -webkit-box-orient: vertical;
}
/*这种方法不会将前几行的单词打断,但是会将最后一行的最后一个单词打断*/

 

三、打断单词和允许长单词换行样式

word-break:break-all;/*打断单词*/
word-wrap:break-word;/*允许长单词换行*/

 

   打断单词就不用过多解释了,

   主要说一下允许长单词换行:如果定宽以后再写长单词,剩下的宽度太窄放不下,长单词就会换行,如果依旧显示不完就打断(也就是一个单词都比你设置的宽度还要宽)。

 

 

 

 

 

 

 

 

 

 

 

 

.

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics