1. <!-- 多行文字超出宽度部分省略号： 显示文字行数 隐藏多余的 文本多余显示省略号text-overflow:ellipsis)-->
html:
<div class="con" ><div id="div1" >1 hello world!这是我内容的超出三行省略号显示！2hello world!这是我内容的超出三行省略号显示！3hello world!这是我内容的超出三行省略号显示！</div></div>
css:
.con{ position: relative }/* 多行文字超出宽度部分省略号 ： */#div1{position: absolute; overflow: hidden;-ms-text-overflow: ellipsis;text-overflow: ellipsis;display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/-webkit-line-clamp: 3; /** 显示的行数 **/background: yellowgreen;}
2.<!-- 一行文字超出宽度部分省略号 ： 强制不换行 隐藏多余的 文本多余显示省略号text-overflow:ellipsis)-->
html
<div class="con" ><div id="div2" >1 hello world!这是我内容的超出一行行省略号显示！ 2 hello world!这是我内容的超出一行行省略号显示！</div></div>
css：
.con{ position: relative }/*一行文字超出宽度部分省略号 ： 强制不换行 隐藏多余的 文本多余显示省略号text-overflow:ellipsis */#div2{position: absolute;left: 0;top: 200px;width: 200px; white-space:nowrap; overflow:hidden; -ms-text-overflow: ellipsis;text-overflow: ellipsis;background: greenyellow;}
参考：/article/15622f24017061fdfdbea558.html
参考/dannywj1371/article/details/8127778
