Html css省略号位于第四行，使用css阅读更多内容

伙计们，我想省略号和阅读更多的标签后第四或第三行，当用户点击阅读更多的内容显示这与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 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

仅适用于铬

适用于所有浏览器

---

此外，您还可以使用js来执行此操作。

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

}

---

-webkit line clamp指定需要从哪一行应用省略号

代码在哪里？你试了什么？你有什么错误吗？这里没有人为你编码？对不起@Sfili_81现在请检查我的编辑问题。谢谢，这里有很多JS插件。一个是：你好，谢谢你伟大的回答，但我能做什么我使你的代码在代码笔没有发生？？增加宽度：50%；到p元素。因为您的视图在codepen中很宽，所以不会发生溢出。因此，没有ellipsesashvani谢谢你的回答我只想在两行计数后自动阅读更多标签显示，就像这个例子一样，但我不想从js中看到cssIm是否可以不使用任何js文件，在这里，我只是调用一个使用css属性的类，我在一个单独的名为web.css的文件中提到了css属性，甚至可以将其称为内联css

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

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

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