Internet Explorer 11 的 webkit 线夹的替代方案？答案

【问题标题】：Alternative to webkit line clamping for Internet Explorer 11?Internet Explorer 11 的 webkit 线夹的替代方案？
【发布时间】：2019-08-13 23:40:41
【问题描述】：

我目前正在使用下面的代码来限制行数，它在除 IE 11 之外的大多数浏览器上都运行良好。

{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}

我查看了很多关于此的帖子，其中许多都是 hacky 解决方案，如果用户更改他/她的浏览器视图设置（如字体大小）可能无法正常工作。 IE 11 中是否有 css 替代方案？

【问题讨论】：

标签： html css webkit internet-explorer-11 ellipsis

【解决方案1】：

使用:after试试这个

p {
  font-size: 26px;
  font-family: serif;
}


  
.line-clamp {
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  position: relative;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 !important;
}

.line-clamp:after {
  content: '...';
  text-align: right;
  bottom: 0;
  right: 0;
  width: 25%;
  display: block;
  position: absolute;
  height: calc(1em * 1.2);
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 75%);
}

@supports (-webkit-line-clamp: 1) {
  .line-clamp:after {
    display: none !important;
  }
}
.line-clamp-2 {
  -webkit-line-clamp: 2;
  height: calc(1em * 1.2 * 2);
}

<p class="line-clamp line-clamp-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 5 COPY Icon copy red DISCOVER MORE! Take a deep dive and
  try our list of over 40 unique generators, find placeholder images for your next design, or add a lorem ipsum plugin to the CMS or text editor of your choice. What is Lorem Ipsum? From its medieval origins to the digital era, learn everything there
   
</p>

【讨论】：

【解决方案2】：

我认为跨浏览器最简单和最兼容的方法是使用Clamp.js。您可以查看以下示例：

var module = document.querySelector(".box p");
$clamp(module, {
  clamp: 2
});

body {
  align-items: center;
  background: radial-gradient( farthest-side at bottom left, rgba(255, 0, 255, 0.5), #246756), radial-gradient( farthest-corner at bottom right, rgba(255, 50, 50, 0.5), #246756 400px);
  display: flex;
  height: 100vh;
  justify-content: center;
  line-height: 1.5;
}

.box {
  background-color: #fff;
  box-shadow: 2px 2px 10px #246756;
  padding: 2em;
  width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Clamp.js/0.5.1/clamp.js"></script>
<div class="box">
  <p>Hey, don't cut me off like that. I want to speak my mind and don't appreciate being put into a box.</p>
</div>

如果你想要更多的选择，包括纯css方式，你可以参考this article。

【讨论】：