使用 CSS 缩短元素的内容 - Shorten content of an element using CSS

Shorten content of an element using CSS

本文关键字：元素 CSS 使用 | 更新日期: 2023-09-27

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

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

你可以在这里使用一些js

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

查看小提琴

表示一行：

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;
}

你可以

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

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

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