一、显示单行
css样式
p{
100px;/*宽度自己设置*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*文本单行超出隐藏显示省略号*/
/*这种方法会将单词打断，比如最后一个单词是interesting打断后就显示成了inter...*/
二、显示多行
p{
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;/*允许长单词换行*/
打断单词就不用过多解释了，
主要说一下允许长单词换行：如果定宽以后再写长单词，剩下的宽度太窄放不下，长单词就会换行，如果依旧显示不完就打断（也就是一个单词都比你设置的宽度还要宽）。
四、兼容性问题
才疏学浅，以后遇到了再补充。哪里描述不正确还望大家批评指正。