css 解决多行内容超出...

css 解决多行内容超出…

如何用css 实现多行内容超出…的效果，分两种情况：

html:

<div class="content">axios深受Angular提供的、\$http服务的启发。 最终，axios是为了在Angular之外使用而提供独立的类似\$http服的务。</div>

1、文本只展示1行，文末…
css:

.content {
  width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

2、文本展示多行，文末…
css:

.content {
  width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;  // 展示3行
  -webkit-box-orient: vertical;
}