时间戳

首页 > 解决方案 > 定义一个div中的最大行数

html - 定义一个div中的最大行数

问题描述

我在里面创建了一个文本，但文本对于 div 来说太大了： 在此处输入图像描述

div停止时如何停止文本？

标签： htmlcss

解决方案

一种选择是line-clamp。它适用于除 IE11 以外的所有浏览器。

您可以控制要显示的行数。或者，您可以在悬停/活动/焦点上展开内容。

.content {
  margin: 0 1em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.content:hover,
.content:active,
.content:focus {
  -webkit-line-clamp: unset;
}
<p class="content">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.</p>

推荐阅读