第几行实现省略效果

65 阅读1分钟

1. 问题描述

想要实现第 2/3/4...n 行出现省略效果

2. 代码实现

2.1 第一行实现省略效果

.test {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

2.2 某一行实现省略效果

.test {
  display: -webkit-box;
  width: 400px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
}

最重要的几行代码:

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;(想要在第几行实现效果就把数字改成几就行)