Question

伙计们，我想要省略号并在第四行或第三行之后阅读更多标签，当用户点击时，使用CSS阅读更多内容。

我想要的是这样的：

  <div class="mycontent">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also this is aweome</p> 
  </div>

我想在我想阅读用户点击和待处理内容显示的更多标签之后才显示前两个单词。如下： -

  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy... read more

现在点击阅读后更多内容显示如下： -

  Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
  Lorem Ipsum has been the industry's standard dummy text ever since the 
  1500s, when an unknown printer took a galley of type and scrambled it to 
  make a type specimen book. It has survived not only five centuries, but 
  also this is awesome

Answer 1

您需要在两行后截断文本。可以有两种方法来做纯css。

仅适用于Chrome

p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
}

适用于所有浏览器

  p {
      overflow: hidden;
      position: relative; 
      line-height: 1rem;
      max-height: 2rem; 
      text-align: justify;  
      margin-right: -1rem;
      padding-right: 1rem;
 }

/* create the ... */
p:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
 }

p:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
  background: white;
}

另外，您可以使用js来完成它。

Answer 2

我的HTML代码是这样的..

<div class="content">
 <p> Lorem Ipsum is simply dummy text of the printing and typesetting 
     industry. Lorem Ipsum has been the industry's standard dummy text ever 
     since the 1500s, when an unknown printer took a galley of type and 
     scrambled it to make a type specimen book. It has survived not only 
     five centuries, but also the leap into electronic </p>
</div>

和web.css应该是这样的

.content {
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 18px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    display: -moz-box;
    color:  8b8989;
    font-size: 13px;

}

-webkit-line-clamp指定需要应用elipsis的哪一行

第四行的css省略号，用css读取更多内容

2 个答案: