jquery - 如何确定 "..."并应用于可见 div 高度内的最后一个单词？

Question

我有一个 overflow:hidden; div，其中包含大量文本，并且具有 css 内联定义的 height。

这意味着在给定高度内可以看到 X 个单词。

是否可以确定给定 style="height: 145px;" div 高度中的最后一个单词是什么，并将“...”应用于该单词，我将如何做这个？

以此说明 fiddle

HTML 示例(在“Cubilia dolor...”之后应用溢出)

<div class="cut-off" style="height: 145px;">
LOREM IPSUM
Lorem ipsum dolor sit amet, et sem sollicitudin diam nascetur tortor ipsum. Cubilia dolor mi nihil, amet et, amet in sit, aenean metus commodo Lorem ipsum 
</div>

Answer 1

你可以使用text-overflow: ellipsis; 来完成此操作。

如

.cutoff{
   ...
  text-overflow: ellipsis;
}

更新

事实证明，这仅适用于单行(不换行，多行 div)。

这是另一个例子( copied on the work from this fiddle ，完全归功于作者，而不是我)

body {
  background: #fff;
}
.container {
  margin: 30px 0;
  width: 300px;
  line-height: 1.5;
  overflow: hidden;
  position: relative;
  max-height: 4.5em;
  /*display ellipsis after 3 lines*/
}
.container:before {
  background: #fff;
  bottom: 0;
  position: absolute;
  right: 0;
  content: '\2026';
}
.container:after {
  content: '';
  background: #fff;
  position: absolute;
  height: 50px;
  width: 100%;
  z-index: 1;
}

<p class="container">
  But more text here (the same markup structure though): if the text overflows from the clamped    paragraph's height, the ellipse will show.
</p>