javascript - 内容超过固定高度后在 div 内打印 "Read more .. "

Question

下面的问题是我的 html 代码:-

HTML:

<div class="compressContent"> //The main div
    <div class="text"> // lets say max width 400px for .text
       <p style="">
          <b style="">
  // content should not exceed after height 400px , but it should display "Read more .. "
          </b>
        </p>
    </div>
</div>

CSS:

.compressContent {
    position:                   relative;
    font-family:                sans-serif;
    display:                    block;
    width:                      244px;
    height:                     auto;
    overflow:                   hidden;
}
.compressContent .text {
    color:                      #333;
    padding:                    20px;
    width:                      204px;
    height:                     400px;
    overflow:                   hidden;
    background:                 #E0E0E0;
    font-size:                  .95em;
    line-height:                1;
    text-align:                 justify;
}

.compressContent .text:after {
    content:                    ' ';
    position:                   absolute;
    display:                    block;
    width:                      100%;
    height:                     1em;
    bottom:                     0px;
    left:                       0px;
    background:                 #E0E0E0;
}

.compressContent .text:before {
    content:                    'Read More...';
    text-align:                 right;
    position:                   absolute;
    display:                    block;
    width:                      2em;
    height:                     1em;
    bottom:                     1em;
    right:                      20px;
}

但有些代码无法给出所需的结果。有人可以用正确的语法指导我吗？可以使用 Javascript 完成吗？一些帮助真的很感激。

在 Google 上搜索并找到 text-overflow: ellipsis; 但它取决于固定宽度，而这里它取决于高度。

找到一个jsfiddle对于垂直省略号但不是那么有用，包含一些 css 错误。

有什么解决办法吗？

Answer 1

是这样的吗？纯 CSS。

计算height: calc(16*20*3);是font-size*line-height*-webkit-line-clamp(lines to show) .

所以在这种情况下，显示了 3 行。如果您希望显示 5，请将 -webkit-line-clamp: 3; 更改为 -webkit-line-clamp: 5; 和 height: calc(16*20*3); 到 height: calc(16*20*5);。

希望对你有帮助

* {
  margin: 0;
  padding: 0;
  @include box-sizing(border-box);
}

body {
  font-family: Helvetica, sans-serif;
  color: black;
}

p {
  display: block;
  display: -webkit-box;
  max-width: 400px;
  height: calc(16*20*3);
  margin: 0 auto;
  font-size: 16px;
  line-height: 20px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.</p>