javascript - 用“...”替换隐藏的溢出

Question

在javscript中，我创建了一个将文本放入 div 的函数。但是，有时这个文本对于这个 div 来说太长了。所以在css中我将溢出设置为隐藏。

overflow: hidden

我不只是不想显示这个溢出，而是想用“...”替换它，以便用户看到信息不完整。

我已经尝试计算字符串的长度，并在几个字符后停止它，但由于我的 div 真的很窄，它似乎是一个很好的解决方案。

我怎么能这样做？

编辑：我想要多行，而不是一个

HTML：

<div id="event">This is way too much text for this div, but i want to show it partly</div>

CSS：

#event{
   position: fixed; //doensn't have to do anything with the problem
   font-size: 8px; //idem
   width: 50px;
   line-height: 1em;
   overflow: hidden;
}

假设 div 可以显示以下文本：

这个 div
的文本太多了，但是

如何在“但是”之后添加 3 个点？

标签： javascriptcssoverflowhidden

Answer 1

该line-clamp属性在特定行数处截断文本。 阅读更多关于 line-clamp 的信息。另外：请检查浏览器支持。

 p#event {
  --line-height: 1.4;
  --num-lines:2; /* 2 lines of text*/
  line-height:var(--line-height);
  display: block; /* Fallback for non-webkit */  
  max-width: 150px;
  height: calc(1em * var(--line-height) * var(--num-lines)); /*2 lines*/
  display: -webkit-box;
  -webkit-line-clamp: var(--num-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}