第四行的css省略号用css读取更多内容 [英] css ellipsis on fourth line with read more with css

问题描述

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

Guys, I want ellipsis and read more tag after fourth or third line when user click on read more than more content show for this with CSS.

我想要的是这样的：

what I want is like this:

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

我想先显示前两个单词，然后再阅读更多标签，用户点击待处理内容显示。如下所示： -

I want to show first two few words only then after I want to read more tag where user click and pending content show. like this follow:-

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

现在点击阅读更多全部内容显示像这样： -

now after click read more all content show like this:-

  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。

You need to truncate text after two lines. There could be two ways to do it pure css.

1. 仅适用于Chrome

1. Only for Chrome

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

对于所有浏览器

For all browsers

  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来做。

additionally, you could use js to do it.

这篇关于第四行的css省略号用css读取更多内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！