Question

我有一个页面，介绍最新的博客文章，其中包含一个动态生成的更多链接。

<div class="row">
    <div class="span3">
      <article>
        <div class="date">
          <span class="day">29</span>
          <span class="month">Oct</span>
        </div>
        <h4>
          <a href="#">How to make a blog</a>
        </h4>
        <p>
          // content here
       </p>
       <a class="read-more" href="#">
          read more
          <i class="icon-angle-right"></i>
       </a>
     </article>
   </div>
   <div class="span3">
      <article>
        <div class="date">
          <span class="day">29</span>
          <span class="month">Oct</span>
        </div>
        <h4>
          <a href="#">How to make a Robot</a>
        </h4>
        <p>
          // content here
       </p>
       <a class="read-more" href="#">
          read more
          <i class="icon-angle-right"></i>
       </a>
     </article>
   </div>           
</div>

如何缩短此内容并在其后添加一些点。

JsFiddle here。

Answer 1

你可以在这里使用一些js

$.each($('article p'),function(i,v){
    if($(v).html().length > 100)
        $(v).html( $(v).html().substr(0,200) + "...");        
});

结帐fiddle

Answer 2

表示一行：

p {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

用于多行webkit浏览器（包括safari，chrome，mobile-safari等）：

p {
    overflow: hidden; 
    text-overflow: ellipsis; 
    display: -webkit-box;
    -webkit-line-clamp: 2; /* line-number */    
    -webkit-box-orient: vertical; 
    word-wrap:break-word;
}

Answer 3

您可以使用div而不是p标签，p标签也可以，并使用以下CSS为其添加类

.myeclipse{
    white-space:nowrap; 
    width:12em;
    height:8em;
    overflow:hidden;
    text-overflow:ellipsis;
}

但是当你介于两者之间时，它将单独应用于所有行，为避免这种情况，请删除br

使用CSS缩短元素的内容

3 个答案: