仅在CSS中的div中文本太长时添加...

Question

我想创建一个标签系统。当div（标签）中的文本太长时，我会截断它并在末尾添加“ ...”。有没有CSS解决方案可以做到这一点？

Answer 1

您可以使用text-overflow: ellipsis它。有关更多信息，请参见代码注释。

div {
  width: 10em; /* the element needs a fixed width (in px, em, %, etc) */
  overflow: hidden; /* make sure it hides the content that overflows */
  white-space: nowrap; /* don't break the line */
  text-overflow: ellipsis; /* give the beautiful '...' effect */
}

<div>This is a text that is too long for this div.</div>

Answer 2

这是您需要的 css。

.tag{
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100px;
}

这里

宽度可以更改为所需的尺寸。

空白将确保文本在同一行。

overflow:hidden将隐藏多余的内容，允许 text-overflow 添加点。

文本溢出：省略号将添加点