文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在文本溢出后添加空格省略号(...)和文本

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

Stack Overflow用户

提问于 2019-04-11 17:50:49

回答 1查看 582关注 0票数 0

您好，我正在使用截断函数来截断我的文本。

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

当前输出为：

...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;
    }

html

css

回答 1

Stack Overflow用户

发布于 2019-04-11 18:26:05

不确定这是否可以使用纯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

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55629583

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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