Javascript “打印”；多读些&引用；内容超出固定高度后的div内部

如问题所示，以下是我的html代码：-

HTML:

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

在Google上搜索并找到

文本溢出：省略号但它取决于固定的宽度，而这里它取决于高度

找到了一个垂直省略号，但没有那么有用，包含一些css错误

有什么解决办法吗？
像这样的吗？纯CSS

计算高度：计算（16*20*3）是
字体大小*线条高度*-webkit线条夹（要显示的线条）

所以在本例中，显示了3行。如果希望显示5，则更改
-webkit线夹：3至
-webkit线夹：5和<代码>高度：计算（16*20*3）至<代码>高度：计算（16*20*5）

希望这对你有帮助


*{
保证金：0；
填充：0；
@包括框尺寸（边框框）；
}
身体{
字体系列：Helvetica，无衬线；
颜色：黑色；
}
p{
显示：块；
显示：-网络工具包盒；
最大宽度：400px；
高度：计算（16*20*3）；
保证金：0自动；
字体大小：16px；
线高：20px；
-webkit线夹：3个；
-网络工具包盒方向：垂直；
溢出：隐藏；
文本溢出：省略号；
}
Lorem ipsum door sit amet，consetetur sadipscing eliter，sed diam nonumy eirmod tempor invidunt ut laboure et.Lorem ipsum door sit amet，conseteteur sadipscing eliter，sed diam nonumy eirmod tempor invidunt ut laboure et.
/code>使用JavaScript可以做到这一点。。当然可以你试过了吗？这里有一个非常简单的实现，但它应该给你一个如何实现的想法：@putvande，你能用一些文章指导我吗，或者给我一个psuedo代码，让我了解应该使用javascript实现什么函数@兹沃纳，谢谢你用密码指导我：）我只是问个问题。。。。此代码是否会因浏览器的不同而受到影响？
<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>

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