CSS 文字两行显示错误（高度固定）

需求描述

需求在固定高度的情况下让文本两行显示，超出部分显示省略号：

于是我写下了如下代码：

/** html 代码 */
<div class="text-overflow-2">
  {{ title }}
</div>

/** css 代码 */
.text-overflow-2{
	display: flex;
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	word-break: break-all;
	height: 50px;
}

问题分析

出现上述的问题是因为：容器的高度超出文本高度。
如果有需求要固定高度，又希望文本两行显示，可以适当使用行高：

.text-overflow-2 {
	 $font-size: 14px;  // scss 变量
	
	 display: flex;
	 display: -webkit-box;
	 overflow: hidden;
	 text-overflow: ellipsis;
	 -webkit-box-orient: vertical;
	 -webkit-line-clamp: 2;
	 word-break: break-all;
	 height: $font-size * 1.7 * 2;  // 计算出两行文本的高度
	 line-height: 1.7;
	 font-size: $font-size;
}