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

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

本文内容

    单行文本

    多行文本

         使用浮动属性和margin

         使用jQuery限制字数

         jQuery自动判断文本是否超出的办法

 

单行文本

实现代码

1. <style>
2. /*单行长文本的溢出显示省略号（...）*/
3. .single {
4. width:200px;
5. height:20px;
6. border:1px solid lavender;
7. /*以下三个属性设置是不能省的，切记！*/
8. overflow: hidden;
9. text-overflow: ellipsis;
10. white-space: nowrap;/*规定段落文本不换行*/
11. }
12. </style>
14. <fieldsetclass="f1">
15. <legend>单行文本</legend>
16. <divclass="single">
17. 这是一段完整的文本，用来测试的，你觉得呢？我觉得很棒，你觉得呢？那就很棒吧！大家一起棒棒哒！
18. </div>
19. </fieldset>

页面效果

 

 

多行文本

 ★  使用-webkit-box

预备知识：-webkit-box

实现代码

1. <style>
2. .mul {
3. height:200px;
4. width:112px;
5. border:1px solid lavender;
6. display:-webkit-box;/*仅支持web-kit内核的浏览器*/
7. -webkit-line-clamp:6;
8. /*指定该容器所能容纳的全行显示的文本行数*/
9. -webkit-box-orient: vertical;/*制定文本内容的排列方式*/
10. overflow: hidden;
11. text-overflow: ellipsis;
12. }
13. </style>
14. <span>使用-webkit-box实现</span>
15. <divclass="mul">
16. 这是一段完整的文本，用来测试的，你觉得呢？我觉得很棒，那你觉得呢？那就很棒吧！大家一起棒棒哒！
17. </div>

 

   ★  使用浮动属性和margin

实现代码

1. <style>
2. /*使用margin结合浮动属性，实现省略号*/
3. .text_overflow_1 {
4. width:24em;
5. height:2.4em;
6. overflow: hidden;
7. zoom:1;
8. }
10. .text_overflow_1 .text_con {
11. float: left;
12. height:1.1em;
13. margin-right:3em;;/*使之与省略号保持一定的间距*/
14. overflow: hidden;
15. }
17. .text_overflow_1 .text_dotted {
18. width:3em;
19. height:1.2em;
20. float: right;/*向右浮动*/
21. margin-top:-1.21em;/*隐藏在div外面*/
22. }
23. </style>
24. <span>使用浮动和margin实现</span>
25. <divclass="text_overflow_1">
26. <divclass="text_con">这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。</div>
27. <divclass="text_dotted">…</div>
28. </div>

 

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

 

 

   ★  使用jQuery限制字数

   缺点：经过我的测试，发现jQuery 3.1.1版本对字符个数的控制并不好，无论是字母还是中文！

   优点：IE也支持！

实现代码

1. <divclass="byjQuery">
2. The context is used for checking.Can you see ?
3. </div>
4. <!--使用jQuery限制字数-->
5. <script>
6. $(document).ready(function(){
7. $(".byjQuery").each(function(){
8. var maxWidth =10;
9. /*限制字符个数*/
10. if($(this).text().length > maxWidth){
11. $(this).text($(this).text().substring(0, maxWidth));
12. $(this).html($(this).html()+'...');
13. }
14. });
15. });
16. </script>

 

   ★jQuery自动判断文本是否超出的办法

重大消息！！！ 对于这个办法的实现，我还是不太了解（反思中...）

实现代码

1. <style>.text_overflow_judge {
2. width:400px;
3. }</style>
5. <span>函数</span>
6. <divclass="text_overflow_judge">你个杀千刀的，怎么写了这么多的文字，我要被拦腰截断了啊，kitty救我！</div>
8. <script>
9. var wordLimit =function(){
10. $(".text_overflow_judge").each(function(){
11. var copyThis = $(this.cloneNode(true)).hide().css({
12. 'position':'absolute',
13. 'width':'auto',
14. 'overflow':'visible'
15. });
16. $(this).after(copyThis);
17. if(copyThis.width()> $(this).width()){
18. $(this).text($(this).text().substring(0, $(this).html().length -4));
19. $(this).html($(this).html()+'...');
20. copyThis.remove();
21. wordLimit();
22. }else{
23. copyThis.remove();//清除复制
24. return;
25. }
26. });
27. };
28. wordLimit();
29. </script>

 

 

感悟：

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

 

 

 

来自为知笔记(Wiz)