Bootstrap card-text 限制为四行答案

【问题标题】：Bootstrap card-text Limit to four linesBootstrap card-text 限制为四行
【发布时间】：2018-12-14 22:54:29
【问题描述】：

我有以下 HTML 代码行，我想在每张卡片中仅显示或显示四行描述，当我单击“readmore”按钮时会显示其余文本，这可能会呈现在不同的页面/页面中。因此如何在引导程序中限制卡片文本中的行或字符。感谢您的帮助：-

 <div class="col-4 ml-2" *ngFor="let t of techBlogs">
                <div class="card shadow">
                  <div class="card-body">
                    <h2 class="card-title">{{t.title}}</h2>
                    <h4 class="card-text">{{t.name}}</h4>
                    <h4 class="card-text text-muted" id="run">{{t.postCreatedDate | date}}</h4>
                    <h4 class="card-text">Description: {{t.description}}
                      <a href="#" class="btn btn-success btn-sm">read more..</a>
                    </h4>
                  </div>
                </div>
              </div>

【问题讨论】：

标签： angular-ui-bootstrap

【解决方案1】：

将文本限制为行数可能不是解决此问题的最佳方法。 Bootstrap 具有响应性，并且会根据设备的大小显示不同的行数，因此您不能依赖它作为衡量标准。

如果您可以改用 wordcount，this SO answer has examples of creating a truncation filter and applying it in your markup

【讨论】：

【解决方案2】：

将line-height设置为rem，然后设置height = number of lines * line-height

【讨论】：