html - 如何使 div 有 2 行最大行并获得省略号？

Question

代码:

    <div class="center-block" style="width: 250px;">
        <div style="height: 250px; /* 1:1 ratio */ overflow: hidden; background-color: #f8ff15;">
        </div>
        <div class="text-center" id="max2lines-div" style="background-color: lightyellow; width: 100%; max-height:2.2em;">
            <p id="subject-text" style=" text-overflow: ellipsis;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt rem odit quis quaerat. In dolorem praesentium velit ea esse consequuntur cum fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem voluptates vel dolorum autem ex repudiandae iste quasi. Minima explicabo qui necessitatibus porro nihil aliquid deleniti ullam repudiandae dolores corrupti eaque</p>
        </div>
    </div>

jsfiddle:https://jsfiddle.net/g2anpehk/5/

代码是呈现250 * 250的图片和图片的主题。 (#subject-text)

但是主题文字太多，溢出#max2lines-div的max-height，text-overflow: ellipsis没用。

问题:

我想做的是使用 text-overflow: ellipsis; 最多只显示 2 行。所以主题应该以 ...

结尾

我该如何解决？

我正在使用 Bootstrap 3.3.7。

Answer 1

尝试使用 line-clamp 带有浏览器前缀...但是它只适用于 -webkit 引擎浏览器...

作为 mozila 使用 gecko 引擎，所以它不会在它上面工作......所以对于 hack 你可以使用 max-height

#subject-text {
  max-height: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  display: -webkit-box;
  display: -moz-box;
  line-height: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  -moz-line-clamp: 2;
}

<div class="center-block" style="width: 250px;">
  <div style="height: 250px; /* 1:1 ratio */ overflow: hidden; background-color: #f8ff15;">
  </div>
  <div class="text-center" id="max2lines-div" style="background-color: lightyellow; width: 100%; max-height:2.2em;">
    <p id="subject-text" style=" text-overflow: ellipsis;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt rem odit quis quaerat. In dolorem praesentium velit ea esse consequuntur cum fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet!Lorem ipsum dolor sit amet, consectetur
      adipisicing elit. Dolorem voluptates vel dolorum autem ex repudiandae iste quasi. Minima explicabo qui necessitatibus porro nihil aliquid deleniti ullam repudiandae dolores corrupti eaque</p>
  </div>
</div>