Question

嗨，我正在使用截断功能来截断文本。

我可以得到预期的结果，但需要一些样式，不确定如何做。

当前输出为：

... texttext

预期输出为：

... texttext

我需要在文本前3个点后添加空格。谁能帮忙

我正在使用以下代码

   .title{
     font-size: 8pt;
     direction: rtl;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     font-weight: bold;
     text-indent:2px;
    }

Answer 1

不确定是否可以使用纯CSS来实现。但是，您可以应用一些javascript逻辑来检查并放置如下所示的类：

var p = document.querySelector(".title");

if (p.scrollWidth > p.offsetWidth) p.classList.add("ellipsis");

while (p.scrollWidth > p.offsetWidth) {
  p.innerHTML = p.innerHTML.slice(0, -1);
}

p {
  width: 50px;
  border: 1px solid;
  padding: 2px 5px;
  /* BOTH of the following are required for text-overflow */
  white-space: nowrap;
  overflow: hidden;
}

.ellipsis:after {
  content: " ... "
}

<body>
  <p class="title">
    Testing overflow: look at me ! Testing overflow: look at me !Testing overflow: look at me !
  </p>
</body>

在文本溢出省略号（...）和文本之后如何添加空间

1 个答案: