2

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

<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在这里。

4

3 回答 3

3

你可以在这里使用一些js

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

看看小提琴

于 2013-10-30T06:15:26.463 回答
1

对于单行：

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;
}
于 2013-10-30T06:15:20.117 回答
0

您可以使用 div 代替 p 标签，p 标签也可以，并使用以下 CSS 向其添加一个类

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

但由于您之间有 br，它将单独应用于所有行，为避免这种情况，请删除 br

于 2013-10-30T06:16:00.517 回答