gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 00:07:16 25 4
gpt4 key购买 nike

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

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

当前输出是:

...文本文本

预期的输出是:

...文本文本

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

我正在使用下面的代码,

   .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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com