多行文本溢出显示省略号..._多行文本溢出 jquery-CSDN博客

本文链接：https://blog.csdn.net/kongjiea/article/details/40076363

定位元素实现多行文本截断

p {
    position: relative;
    line-height: 18px;
    height: 36px;
    overflow: hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}

demo：https://jsfiddle.net/lindz/6aqnye4u/2/

float 特性实现多行文本截断

.wrap {
  height: 40px;
  line-height: 20px;
  overflow: hidden;
}
.wrap .text {
  float: right;
  margin-left: -5px;
  width: 100%;
  word-break:break-all;
}
.wrap::before {
  float: left;
  width: 5px;
  content: '';
  height: 40px;
}
.wrap::after {
  float: right;
  content: "...";
  height: 20px;
  line-height: 20px;
  padding-right: 5px;
  text-align: right;
  width: 3em;
  margin-left: -3em;
  position: relative;
  left: 100%;
  top: -20px;
  padding-right: 5px;
  /* 显示更好的效果 */
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
  background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}

<div class="wrap">
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus atque quos magnam assumenda quod architecto perspiciatis animiuos magnam assumenda quod architecto perspiciatis animiuos magnam assumenda quod architecto perspiciatis animiuos magnam assumenda quod architecto perspiciatis animi.</div>
</div>

demo：https://jsfiddle.net/lindz/95h0edp6/35/

现在的浏览器都支持text-overflow:ellipsis属性，用来实现单行文本的溢出显示省略号，但是这个属性并不支持多行文本。那么有没有方法在多行文本上实现同样的效果呢？

-webkit-line-clamp

Webkit支持一个名为-webkit-line-clamp的属性，他其实是一个WebKit-Specific Unsupported Property，也就是说这个属性并不是标准的一部分，可能是Webkit内部使用的，或者被弃用的属性。但是既然被人发现了，而且能用，为什么不试试呢~o(∩_∩)o


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

Demo: http://jsfiddle.net/Cople/maB8f/

-o-ellipsis-lastline

从 Opera 10.60 开始，text-overflow属性有了一个名为-o-ellipsis-lastline的值。应用后的效果就像名字一样，在文本的最后一行加上省略号。这个方法比楼上的方法简单多了，可惜也不在标准之内//(ㄒoㄒ)//


p {
    overflow: hidden;
    white-space: normal;
    height: 3em;
    text-overflow: -o-ellipsis-lastline;
}

Demo: http://jsfiddle.net/Cople/ash5v/

jQuery

除了各个浏览器私有的属性，有没有跨浏览器的解决方法呢？当然是通过js实现啦！（通过从后向前逐个删除末尾字符，直至元素的高度小于父元素高度）

.figcaption {
    background: #EEE;
    width: 410px;
    height: 3em;
    margin: 1em;
}
.figcaption p {
    margin: 0;
    line-height: 1.5em;
}

<div class="figcaption"><p>作为微软的游戏平台，Xbox已经出现在了Windows Phone和Windows 8中，就在最近，微软宣布将旗下的Zune消费品牌也一并整合至Xbox品牌下，Xbox Live服务影响力越来越大，渗透面也越来越广。</p></div>
    
<div class="figcaption"><p>固定一个喜欢的网站可不可以？当然！把每天常去的网站统统固定到开始屏幕中。如何固定？打开 IE10，在网页空白处点击鼠标右键，在应用栏中点击“图钉”图标即可完成固定。</p></div>
    
<div class="figcaption"><p>先前给大家介绍了很好用的 Colors！今天给大家介绍一款风格不同的画画软件——Fresh Paint，我们可以用它画出油画。</p></div>
    
<div class="figcaption"><p>You probably can't do it (currently?) without a fixed-width font like Courier. With a fixed-width font every letter occupies the same horizontal space, so you could probably count the letters and multiply the result with the current font size in ems or exs. Then you would just have to test how many letters fit on one line, and then break it up.</p></div>

$(".figcaption").each(function(i){
    var divH = $(this).height();
    var $p = $("p", $(this)).eq(0);
    while ($p.outerHeight() > divH) {
        $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
    };
});