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

一、显示单行

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

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

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

四、兼容性问题

才疏学浅，以后遇到了再补充。哪里描述不正确还望大家批评指正。