码迷,mamicode.com
首页 > 其他好文 > 详细

多行文本超出部分以省略号显示

时间:2017-05-28 19:36:49      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:多行   内容   效果   src   png   需要   理解   height   其他   

看到这样的效果,首先想到的是css3,真的能解决吗?百度了一下还真的可以

 

  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

 

BUT,这是什么? -webkit- 这是指的在WebKit内核的浏览器才能看到的效果。所以这就是没有用的。

然后又看了其他的很多写法,并没有实现自己想要的效果。决定用js来控制

 

<p class="ellipsis">
我要在第二行的时候多余隐藏!我要在第二行的时候多余隐藏!我要在第二行的时候多余隐藏!我要在第二行的时候多余隐藏!我要在第二行的时候多余隐藏!我要在第二行的时候多余隐藏!我要在第二行的时候多余隐藏! </p>

.ellipsis{
     width: 500px;
     line-height: 23px;
 }

 

$(function(){
    $(".ellipsis").each(function(){
        var maxwidth=36;
        if($(this).text().length>maxwidth){
           $(this).text($(this).text().substring(0,maxwidth));
           $(this).text($(this).html()+‘…‘);
        }
     });
 })

 

需要先引入 jQuery.js

原理解析:设置一个最大的字符数,判断当文本内容超出了最大的字符数时,然后截取,最后显示。

 

此为效果:

技术分享

 

 *下载的插件没看懂怎么用了,愣是不出效果,只能自己写*

 

多行文本超出部分以省略号显示

标签:多行   内容   效果   src   png   需要   理解   height   其他   

原文地址:http://www.cnblogs.com/wyhlightstar/p/6916397.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!