如何使用webkit-line-clamp？

Question

我有这个代码来让我的段落变短。

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

但问题是，这段代码将所有内容都写在一行中。我想用3行文字，然后...我在谷歌上搜索了一下，发现我们有它的WebKit

webkit-line-clamp

但我不知道如何使用它，它不起作用...

Answer 1

方法1:使用text-overflow: ellipsis;

​

span {
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 250px;
    display: block;
    overflow: hidden
}

<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>

​

方法2:使用-webkit-line-clamp

​

p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; 
}

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

​

Answer 2

不带flexbox的解决方案

设置文本容器的高度，并相应地使用webkit-line-clamp。

.line-clamp-3 {
  display: block;
  display: -webkit-box;
  height: 50px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

文本将按如下方式显示。

​

使用flexbox的解决方案

您也可以通过以下链接获取帮助：https://css-tricks.com/flexbox-truncated-text/

​

.flex-parent {
  display: flex;
}

.short-and-fixed {
  width: 30px;
  height: 30px;
}

.long-and-truncated {
  margin: 0 20px;
  flex: 1;
  min-width: 0;
}

.long-and-truncated span {
  display: inline;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
}

<div class="flex-parent">
  <div class="flex-child short-and-fixed">
  </div>
  <div class="flex-child long-and-truncated">
    <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>
  </div>
  <div class="flex-child short-and-fixed">
  </div>
</div>

​