文本溢出部分显示为省略号

前些天做个页面需要实现容器内文本溢出部分显示为省略号（...）的功能。我搜了下相关的资料，比较全的资料应该是张大神写的《关于文字内容溢出用点点点（...）省略号表示》 结合各类资料，我整理出效果比较好的几个实现办法。另外，个人感觉这些资料都是比较久远的。不知当下主要的实现办法是什么望各位前辈分享，谢谢！

本文内容

单行文本
多行文本
使用浮动属性和margin
使用jQuery限制字数
jQuery自动判断文本是否超出的办法

单行文本

实现代码

<style>

/*单行长文本的溢出显示省略号（...）*/

.single {

width:200px;

height:20px;

border:1px solid lavender;

/*以下三个属性设置是不能省的，切记！*/

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;/*规定段落文本不换行*/

}

</style>

<fieldsetclass="f1">

<legend>单行文本</legend>

<divclass="single">

这是一段完整的文本，用来测试的，你觉得呢？我觉得很棒，你觉得呢？那就很棒吧！大家一起棒棒哒！

</div>

</fieldset>

页面效果



多行文本
★ 使用-webkit-box
预备知识：-webkit-box
实现代码

<style>

.mul {

height:200px;

width:112px;

border:1px solid lavender;

display:-webkit-box;/*仅支持web-kit内核的浏览器*/

-webkit-line-clamp:6;

/*指定该容器所能容纳的全行显示的文本行数*/

-webkit-box-orient: vertical;/*制定文本内容的排列方式*/

overflow: hidden;

text-overflow: ellipsis;

}

</style>

<span>使用-webkit-box实现</span>

<divclass="mul">

这是一段完整的文本，用来测试的，你觉得呢？我觉得很棒，那你觉得呢？那就很棒吧！大家一起棒棒哒！

</div>

★ 使用浮动属性和margin
实现代码

<style>

/*使用margin结合浮动属性，实现省略号*/

.text_overflow_1 {

width:24em;

height:2.4em;

overflow: hidden;

zoom:1;

}

.text_overflow_1 .text_con {

float: left;

height:1.1em;

margin-right:3em;;/*使之与省略号保持一定的间距*/

overflow: hidden;

}

.text_overflow_1 .text_dotted {

width:3em;

height:1.2em;

float: right;/*向右浮动*/

margin-top:-1.21em;/*隐藏在div外面*/

}

</style>

<span>使用浮动和margin实现</span>

<divclass="text_overflow_1">

<divclass="text_con">这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。</div>

<divclass="text_dotted">…</div>

</div>

原理：当文本足够长时，将会把向右浮动的省略号被挤到问本行显示。关键是省略号margin-top和.text_con数值的设置，建议添加文本框，多次改变数值观察对比。（我就是这么干的::>_<:: ）

★ 使用jQuery限制字数
缺点：经过我的测试，发现jQuery 3.1.1版本对字符个数的控制并不好，无论是字母还是中文！
优点：IE也支持！
实现代码

<divclass="byjQuery">

The context is used for checking.Can you see ?

</div>

<!--使用jQuery限制字数-->

<script>

$(document).ready(function(){

$(".byjQuery").each(function(){

var maxWidth =10;

/*限制字符个数*/

if($(this).text().length > maxWidth){

$(this).text($(this).text().substring(0, maxWidth));

$(this).html($(this).html()+'...');

}

});

});

</script>

★jQuery自动判断文本是否超出的办法
重大消息！！！ 对于这个办法的实现，我还是不太了解（反思中...）
实现代码

<style>.text_overflow_judge {

width:400px;

}</style>

<span>函数</span>

<divclass="text_overflow_judge">你个杀千刀的，怎么写了这么多的文字，我要被拦腰截断了啊，kitty救我！</div>

<script>

var wordLimit =function(){

$(".text_overflow_judge").each(function(){

var copyThis = $(this.cloneNode(true)).hide().css({

'position':'absolute',

'width':'auto',

'overflow':'visible'

});

$(this).after(copyThis);

if(copyThis.width()> $(this).width()){

$(this).text($(this).text().substring(0, $(this).html().length -4));

$(this).html($(this).html()+'...');

copyThis.remove();

wordLimit();

}else{

copyThis.remove();//清除复制

return;

}

});

};

wordLimit();

</script>

感悟：
功能的实现永远永远有更高效有力的办法！

来自为知笔记(Wiz)