javascript - 用 "..."替换 overflow hidden

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 个点？

Answer 1

line-clamp 属性在特定行数处 chop 文本。 Read more about 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;
}