截断溢出：隐藏容器中的重叠文本

Question

我有一个flexbox容器，其中包含一些列，包含内容的列和内容容器具有固定的高度，我使用overflow: hidden来隐藏溢出的文本。由于example有时我会在底部处理一些我想要截断的重叠文本。在这种情况下，最适用的解决方法是什么。

(function($) {
    "use strict";

    const TILE_MAX_HEIGHT = 288;
    const TILE_MIN_HEIGHT = 268;

    var ArticleTile = {
        init: function() {
            this.$tiles = $('.flex__teaser');
            this.iterateTiles();
        },

        iterateTiles: function () {
            var self = this;

            this.$tiles.each(function () {
                var $titleHeight = $(this).find('h1').outerHeight(),
                    $teaserHeight = $(this).find('.flex__content');

                if($titleHeight >= TILE_MIN_HEIGHT) {
                    self.hideTeaser(this)
                }
            })
        },

        hideTeaser: function (el) {
            $(el).find('.flex__content').addClass('hide');
        },

        ellipseContent: function (content) {

        }
    };

    $(document).ready(function() {
        ArticleTile.init();
    });


})($);

.main__content {
  width: calc(965px);
  margin-left: auto;
  margin-right: auto;
}
.flex__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
.flex__container:after {
  content: "";
  -webkit-box-flex: 0;
      -ms-flex: 0 0 380px;
          flex: 0 0 380px;
}
.flex__base {
  -ms-flex-preferred-size: 365px;
      flex-basis: 365px;
  max-width: 365px;
  margin-bottom: 50px;
}
.flex__tile {
  height: 290px;
  overflow: hidden;
}
.flex__title {
  font-family: serif;
  font-style: normal;
  font-weight: 300;
  letter-spacing: 1.3px;
  font-size: 64px;
  line-height: 1.17;
  color: #4e4e4e;
  margin: 18px 0;
  font-size: 36px;
  padding-bottom: 18px;
}
.flex__content {
  text-decoration: none;
  font-size: 18px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.67;
  letter-spacing: 0.4px;
}

}
.flex__tile {
  height: 290px;
  overflow: hidden;
}
.flex__title {
  line-height: 1.3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main__content">
  <div class="flex__container">
  <div class="flex__base">
    <div class="flex__tile">
      <div class="flex__header"></div>
      <div class="flex__teaser">
        <h1 class="flex__title">Donec nec urna at leo faucibus bibendum accumsan sit amet ipsum. Sed mollis ligula vitae ipsum scelerisque, in mollis sapien efficitur.</h1>
        <div class="flex__content">
           Duis vel nisl efficitur, pharetra ligula eget, ultricies arcu. Vivamus hendrerit erat metus, at sollicitudin nisi tincidunt in. Ut volutpat elit lobortis mi maximus finibus vitae in tellus. Morbi faucibus rutrum velit et blandit. Nullam et tincidunt nulla. Nunc blandit rhoncus magna, id eleifend risus congue id.
        </div>
      </div>
    </div>
  </div>
  <div class="flex__base">
    <div class="flex__tile">
      <div class="flex__header"></div>
      <div class="flex__teaser">
        <h1 class="flex__title">
          Donec nec urna at leo faucibus bibendum accumsan sit amet ipsum.
        </h1>
        <div class="flex__content">
           Duis vel nisl efficitur, pharetra ligula eget, ultricies arcu. Vivamus hendrerit erat metus, at sollicitudin nisi tincidunt in. Ut volutpat elit lobortis mi maximus finibus vitae in tellus. Morbi faucibus rutrum velit et blandit. Nullam et tincidunt nulla. Nunc blandit rhoncus magna, id eleifend risus congue id.
        </div>
      </div>
    </div>
  </div>
  <div class="flex__base">
    <div class="flex__tile">
      <div class="flex__header"></div>
      <div class="flex__teaser">
        <h1 class="flex__title">
          Donec nec urna at leo faucibus bibendum accumsan sit amet ipsum. Sed mollis ligula vitae ipsum scelerisque.
        </h1>
        <div class="flex__content">
           Duis vel nisl efficitur, pharetra ligula eget, ultricies arcu. Vivamus hendrerit erat metus, at sollicitudin nisi tincidunt in. Ut volutpat elit lobortis mi maximus finibus vitae in tellus. Morbi faucibus rutrum velit et blandit. Nullam et tincidunt nulla. Nunc blandit rhoncus magna, id eleifend risus congue id.
        </div>
      </div>
    </div>
  </div>
  <div class="flex__base">
    <div class="flex__tile">
      <div class="flex__header"></div>
      <div class="flex__teaser">
        <h1 class="flex__title">
          Donec nec urna at leo faucibus bibendum.
        </h1>
        <div class="flex__content">
           Duis vel nisl efficitur, pharetra ligula eget, ultricies arcu. Vivamus hendrerit erat metus, at sollicitudin nisi tincidunt in. Ut volutpat elit lobortis mi maximus finibus vitae in tellus. Morbi faucibus rutrum velit et blandit. Nullam et tincidunt nulla. Nunc blandit rhoncus magna, id eleifend risus congue id.
        </div>
      </div>
    </div>
  </div>
  <div class="flex__base">
    <div class="flex__tile">
      <div class="flex__header"></div>
      <div class="flex__teaser">
        <h1 class="flex__title">
             Donec nec urna at leo faucibus bibendum accumsan sit amet ipsum. Sed mollis ligula vitae ipsum.
        </h1>
        <div class="flex__content">
           Duis vel nisl efficitur, pharetra ligula eget, ultricies arcu. Vivamus hendrerit erat metus, at sollicitudin nisi tincidunt in. Ut volutpat elit lobortis mi maximus finibus vitae in tellus. Morbi faucibus rutrum velit et blandit. Nullam et tincidunt nulla. Nunc blandit rhoncus magna, id eleifend risus congue id.
        </div>
      </div>
    </div>
  </div>
</div>  
</div>