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

标签 html css

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

我可以得到预期的结果,但需要一些样式,但不确定该怎么做。

当前输出是:

...文本文本

预期的输出是:

...文本文本

我需要在文本之前的那三个点之后添加空格。谁能帮忙解决这个问题

我正在使用下面的代码,

   .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 实现。但是,您可以应用一些 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>

关于html - 如何在文本溢出省略号点(...)和文本后添加空格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55629583/

相关文章:

html - CSS 布局 : Is it possible to move the div box?

javascript - 无法使 HTML/PHP/JavaScript 幻灯片代码正常工作

html - float 元素变成居中元素

javascript - 如何在javascript中管理多个计时器?

javascript - 当点击反转一个数组 React

javascript - 当列表中的元素数超过屏幕高度时,列表元素不会从一开始就显示

html - 如何使水平按钮向右对齐?

html - :not里面的伪类

css - 我无法让我的页脚全宽

css - 字体/文本大小是否比 em 更易于访问和管理?