css 如何在文本溢出后添加空格省略号点(...)和文本

m3eecexj 于 2023-10-21 发布在其他

关注(0)|答案(2)|浏览(119)

你好，我正在使用截断函数来截断我的文本。
我可以得到预期的结果，但需要一些造型，不知道如何做到这一点。
当前输出为：
. 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;
    }

css

来源：https://stackoverflow.com/questions/55629583/how-to-add-space-after-the-text-overflow-ellipsis-dots-and-text

2条答案

按热度按时间

bgtovc5b1#

我不知道这是否可以用纯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>

赞(0）回复(0）举报 2023-10-21

4szc88ey2#

只需删除text-indent:2px;您的问题将得到解决

赞(0）回复(0）举报 2023-10-21

我来回答

css 如何在文本溢出后添加空格省略号点(...)和文本

2条答案

相关问题

热门标签

最新问答