Bootstrap 如何限制字符数并将...放在末尾

q5iwbnjs 于 2022-12-07 发布在 Bootstrap

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

我有一个页面，显示我的产品，但这个产品带有一个非常长的描述
我希望当它下降x数量的字符，它将削减在css和显示...在结束

<dd class="hiddendescricao deskonly" id="descricao"></dd>
<a (click)="rollDown(sectionRelated)" class="text-secondary">Ver mais</a>

.hiddendescricao {
display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
position: relative;
height: 100%;
}

setDescricao() {
document.getElementById('descricao').innerHTML = this.item.item_linkWeb?.linkWeb.descricaoHtml; //<p>Belíssimo buquê de astromélias, feito a mão por nossos profissionais, garante a beleza e o cuidado especial que a pessoa amada merece. Seu fácil cuidado e manutenção permitem que desde de crianças até adultos possam receber esse carinho em forma de flores.</p>
document.getElementById('descricao2').innerHTML = this.item.item_linkWeb?.linkWeb.descricaoHtml; //<p>Belíssimo buquê de astromélias, feito a mão por nossos profissionais, garante a beleza e o cuidado especial que a pessoa amada merece. Seu fácil cuidado e manutenção permitem que desde de crianças até adultos possam receber esse carinho em forma de flores.</p>
}

我的CSS的问题是，限制和把...在最后，是，描述必须到行尾工作，我认为限制字符更好

twitter-bootstrap

来源：https://stackoverflow.com/questions/74195319/how-to-limit-the-amount-of-characters-and-put-at-the-end

2条答案

按热度按时间

v440hwme1#

添加值为{n}ch的max-width属性。例如：max-width: 100ch。然后，套用white-space: nowrap和overflow: hidden以移除溢位字符。若要在结尾加入一些点，请加入text-overflow: ellipsis属性。
您定义的值后面的任何字符都将被删除。
第一个
如果要限制行数，可以使用line-clamp属性，而不是设置字符数（max-width: {n}ch）：

display: -webkit-box;
   -webkit-line-clamp: 3; /*   Set the number of lines here  */
   -webkit-box-orient: vertical;

示例：
第一个

赞(0）回复(0）举报 2022-12-07

dm7nw8vv2#

只要根据字符串的值用JS来做就行了。在base JS中你可以做类似的事情。在react中你也可以做同样的事情，但是在useEffect中，然后将字符串（截断或不截断）存储为state值。
下面的例子将截断一个长度大于20个字符的字符串。要改变这一点，只需将两个20改为其他内容，甚至可以将截断长度作为函数的参数。

const truncateString = (string) => {
  if (string.length > 20) {
    const truncatedString = `${string.slice(0, 20)}...`;
    setStringSomewhere(truncatedString)
  } else setStringSomewhere(string);
}

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 如何限制字符数并将...放在末尾

2条答案

相关问题

热门标签

最新问答