Question

CODE：

    <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的最大高度而text-overflow: ellipsis没用。

问题：

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

结束

我该如何解决？

我正在使用bootstrap 3.3.7。

Answer 1

线路钳是你的答案，但它没有得到很好的支持。

试试这个：

#max2lines-div p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

并检查：https://caniuse.com/#search=line-clamp

Answer 2

尝试将 line-clamp 与浏览器前缀一起使用...但它只适用于-webkit引擎浏览器......

由于mozila使用 gecko 引擎，所以它无法使用它...所以对于hack你可以使用max-height

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: