标签：word 省略号 换行 break webkit overflow 文本

1.单行实现文字省略号
/这里要显示的设置宽度/
overflow:hidden;
white-space:nowrap;
/文字超出宽度则显示ellipsis省略号/
text-overflow:ellipsis;
width:100%;
2345截图20181015145014.png
2.第几行实现文字省略号
display:-webkit-box;
-webkit-box-orient:vertical;/设置方向/
-webkit-line-clamp:2;/设置超过为省略号的行数/
overflow:hidden;
使用webpack打包工具时，会忽视这个-webkit-box-orient属性，这里修改成下面的写法就可以了
display:-webkit-box;
overflow:hidden;
/autoprefixer:off/
-webkit-box-orient:vertical;
/autoprefixer:on/
-webkit-line-clamp:8;
text-overflow:ellipsis;
3.用js实现字数后加省略号
if(title.length>26){
title=title.substring(0,27)+"...";
}
4.换行word-break和word-wrap
white-space:normal(自动换行)，当写入的文字超过定义的宽度后会自动换行，但当写入的数据是一堆没有空格的字符或者字母或者数字时，超过容器的宽度时就会把容器撑大，不换行
这时可以用：word-break:break-all;word-wrap:break-word来解决
word-break:break-all在超过容器宽度时，若有一个单词很长，则会将单词截断，分开写
word-wrap:break-word在超过容器宽度时，若有一个单词很长，则会将单词放到下一行，而不对单词进行截断
word-break:normal|break-all|keep-all
normal:允许在字内换行
break-all:允许在单词内换行
keep-all:只能在半角空格或连字符处换行。
word-wrap:normal|break-word
normal:允许内容顶开指定的容器边界
break-word:内容将在边界内换行。如果需要，词内换行（word-break）也会发生

标签：word,省略号,换行,break,webkit,overflow,文本
来源： https://www.cnblogs.com/xuelinomen/p/16476661.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。