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

阅读更多

一、显示单行

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;/*允许长单词换行*/

 

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

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

 

 

 

 

 

 

 

 

 

 

 

 

.