Question

由于Webkit-line-clamp仅适用于chrome，我试图实现适用于所有浏览器的相同功能。

如果有超过4行，我隐藏剩余内容并添加省略号，但问题是如果少于4行，则省略号即将到来，其高度为4行。我想要它只有超过4行

＆＃13;

.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%);
}

.line-clamp-4
{
	height             : calc(1em * 1.2 * 4);
}

＆＃13;

 <p id="FirstDiv" class="line-clamp line-clamp-4">This is a cross-browser (pure CSS) solution that will clamp text to X number of lines with a trailing ellipsis in Webkit browsers. The `height` property is used on other browsers (along with a fading text effect) as a graceful fallback in non-Webkit browsers. The use of CSS `calc` allows for any font-size to work properly; i.e. you don't need a fixed height or a fixed font size for this to work! Play with it :-) You can change the second class to `line-clamp-[1|2|3|4|5]` and experiment with this just a little.</p>

<br>
<br>
 <p id="SecondDiv"  class="line-clamp line-clamp-4">This is a cross-browser (pure CSS)</p>
<br>

＆＃13;

我可以用这个代码做什么，或者有什么方法可以实现这个，就像在所有浏览器中使用line-clamp一样？

限制文本行并添加省略号

0 个答案: