This question already has answers here:
Applying an ellipsis to multiline text
                                
                                    (25个答案)
                                
                        
                                去年关闭。
            
                    
伙计们,我希望省略号并在用户单击第四行或第三行后读取更多标签,以使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

最佳答案

您需要在两行之后截断文本。纯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来做到这一点。

08-25 17:21
查看更多