如何减少div（或html元素）中的单词以创建概述

Question

尝试使用帖子中的前几个单词创建博客帖子的概述，然后点击完整的帖子打开，但因为我不想写任何后端代码，我想知道是否有以下内容和HTML功能这一点。

更新

我不会像我在答案中看到的那样问如何处理溢出。我问的是，HTML中的构造是否可以允许一个显示像50个单词，例如那里有一千个就像和概述一样。

Answer 1

<div id="greetings">
  Hello universe!
</div>

#greetings{
  width: 100px
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
}

如果浏览器兼容，你应该得到像

这样的东西

  

Hello univ ...

显示在页面上。

参考：http://www.w3schools.com/cssref/css3_pr_text-overflow.asp

Answer 2

这是两个mixins（在.sass上）：

=ellipsis
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

=ellipsis-multi($lines: 2)
  overflow: hidden
  display: -webkit-box
  -webkit-line-clamp: $lines
  -webkit-box-orient: vertical

你正在使用它：

.title
    +ellipsis-multi(3)

或者只是在css中

.title {
  overflow: hidden
  display: -webkit-box
  -webkit-line-clamp: 3
  -webkit-box-orient: vertical
}