设置多行省略号（...）

Question

我正在尝试设置3行文本的省略号（...）的样式，单击该样式时，将使用jQuery显示全部文本。目前，我已经能够为Webkit浏览器在3行上创建多行省略号，但是它与IE和Firefox等所有浏览器均不兼容，但可以在Chrome＆Edge上使用。

在this post的影响下，我只能在一行的文字上设置省略号的样式，而不能在三行文字上设置省略号的样式，以确保其覆盖另一CSS。

有人知道如何将这种样式应用于第三行的省略号吗？我的尝试代码如下：

$('.flex-text.description').click(function() {
  if ($(this).css('-webkit-line-clamp') == '3') {
    $(this).css('-webkit-line-clamp', 'initial');
  } else {
    $(this).css('-webkit-line-clamp', '3');
  }
});

.sad-flex {
  display: flex;
  flex-flow: row wrap;
}

.flex-item {
  width: 23.5%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flex-item:not(:nth-of-type(4n+1)) {
  margin-left: 2%
}

.flex-item:nth-of-type(n+5) {
  margin-top: 2%
}

.flex-item-image-link {
  width: 100%
}

.flex-item img {
  width: 100%;
  background-size: cover;
  background-position: center;
}

.flex-item,
.flex-text-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1em;
  text-align: center;
  position: relative;
  font-family: arial;
  /* perhaps remove */
  justify-content: flex-start;
}

.flex-text-content {
  padding: 10px;
  width: 100%;
}

.flex-item .flex-text.header {
  margin-bottom: 0;
  font-weight: 700;
  width: 100%;
}

.flex-item .flex-text.header a {
  color: #000
}

.flex-item .flex-text.price {
  padding-top: 20px;
  font-size: 1.4em;
  color: grey;
}

.flex-item .flex-text.description {
  font-size: 1em;
  padding-top: 20px;
  overflow: hidden;
  width: 100%;
  height: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  /* Other ellipsis method: */
  /* max-height: 6em; */
  /* limits to 3 lines of text */
  /* ellipsis below: */
  /* white-space: nowrap; */
  /* text-overflow: ellipsis; */
  /* max-width: 650px; */
  /* solves the flex white-space nowrap width pushout problem */
  /* Limit to 3 lines, then ellipsis */
}

.flex-item .flex-btn {
  border: none;
  outline: 0;
  padding: 12px;
  color: #fff;
  background-color: #000;
  cursor: pointer;
  width: 100%;
  font-size: 1.3em;
  margin: auto auto 0 auto;
}

.flex-item .flex-btn:hover {
  opacity: 0.7
}

.flex-item ul {
  text-align: left
}

@media (max-width: 767px) {
  .flex-item:not(:nth-of-type(4n+1)) {
    margin-left: 3%
  }
  .flex-item {
    width: 48.5%
  }
  .flex-item:not(:nth-of-type(even)) {
    margin-left: 0
  }
  .flex-item:nth-of-type(n+3) {
    margin-top: 3%
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="sad-flex">
  <div class="flex-item">
    <a class="flex-item-image-link" href="#" data-galinkprocessed="true"><img src="https://cml.sad.ukrd.com/tp/3x2/" style="background-image:url(https://cml.sad.ukrd.com/image/219581.jpg)"></a>
    <div class="flex-text-content">
      <h2 class="flex-text header"><a href="#" data-galinkprocessed="true">Pine Cone</a></h2>
      <span class="flex-text price">$81.52</span>
      <span class="flex-text description">A delightful cone made of genuine North American pine, coated with sticky ooze for that authentic natural experience and some more text to just go here anyway  and some more text to just go here anyway and some more text to just go here anyway.</span>
    </div>
    <button onclick="location.href='#'" class="flex-btn">Add to Cart</button>
  </div>
</div>

我已经制作了一个代码笔演示来演示：https://codepen.io/anon/pen/wRObXd