单词的换行、溢出隐藏 - 小程序篇

语法的认识

word-break

normal｜break-all ｜ keep-all

• normal：使用浏览器默认的换行规则。
• keep-all：允许在单词内换行。
• keep-all：只能在半角空格或连字符处换行
  

word-wrap

normal | break-word

• normal：只在允许的断字点换行(浏览器保持默认处理)。
• break-word：在长单词或URL地址内部进行换行。
  

white-space

空格转换

normal｜nowrap｜pre｜pre-wrap｜pre-line

• pre是preserve(保留)的缩写，跟保留空格有关系。
• pre：保留所有的空格和回车，且不允许折行。
• pre-wrap：保留所有的空格和回车，但是允许折行。
• pre-line：会合并空格，且允许折行。

富文本里的 html 标签之间有空格

既然浏览器会压缩多个空格，那只要保证文本里每次只有一个空格相邻就可以了。

□ --> □ 
□□ --> □  
□□□ --> □ □ 
□□□□ --> □ □  

自动规避了浏览器的合并空格策略。

单词超出显示省略号(单行)

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;
}
/*这种方法不会将前几行的单词打断，但是会将最后一行的最后一个单词打断*/

说在最后

1. word-wrap：决定句尾放不下单词时，单词是否换行。
2. word-break：决定单词内该怎么换行。
3. 平文本可以配合 white-space: pre-wrap 来解决多空格压缩显示问题。
4. 富文本采用的解决方案是对空格进行间隔 html 转义，这种方法更灵活，可以适应不同的场景，也适用于平文本。

参考链接：
[1].https://blog.csdn.net/Bule_daze/article/details/103837307

踩坑，留下足迹!!!