文本最后自动出现省略号...
一:.单行文本溢出显示省略号…
<div class="ellipsis">单行文本css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分</div>
.ellipsis{ width:130px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
1. white-space:nowrap; 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
2. text-overflow: ellipsis; 显示省略符号来代表被修剪的文本。 (延伸:clip 修剪文本。)
二:多行文本溢出显示省略号…
<div class="mult_line_ellipsis">多行文本css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分</div>
.mult_line_ellipsis{ overflow: hidden; text-overflow:ellipsis;//文本溢出显示省略号 display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; width:130px;}
1. -webkit-line-clamp: 3; 在第3行显示省略符号
三:跨浏览器兼容的方法
<div class="imitate_ellipsis">浏览器兼容伪类写法css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分</div>
.imitate_ellipsis{ position:relative; line-height:1.4em; height:2.8em; overflow:hidden; width:130px; background-color: orange; } .imitate_ellipsis::after{ content:"..."; font-weight:bold; position:absolute; bottom:0; right:0; padding-left:20px; background: -webkit-linear-gradient(left, transparent, #fff 62%); background: -o-linear-gradient(right, transparent, #fff 62%); background: -moz-linear-gradient(right, transparent, #fff 62%); background: linear-gradient(to right, transparent, #fff 62%); }
四:js实现单行溢出省略号…(参数1是允许最大文字数目,参数2是元素节点的id)
<div id="ellipsis">浏览器兼容伪类写法css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分</div>
<script type="text/javascript"> function mitulineHide(num,con){ var contain = document.getElementById(con); console.log(con); var maxSize = num; var txt = contain.innerHTML; if(txt.length>num){ console.log('1'); txt = txt.substring(0,num-1)+"..."; contain.innerHTML = txt; }else{ console.log("error") } }; mitulineHide(10,'ellipsis'); </script>
注释: