您好,我正在使用截断函数来截断我的文本。
我可以得到预期的结果,但需要一些样式,但不确定该怎么做。
当前输出是:
...文本文本
预期的输出是:
...文本文本
我需要在文本之前的那三个点之后添加空格。谁能帮忙解决这个问题
我正在使用下面的代码,
.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/