如何限制字符的数量并将..。在最后

Question

我有一页显示我的产品，但是这个产品有一个很长的描述。

我希望当它减少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的问题是限制和放置..。最后，就是描述要走到线的末尾才能工作，我认为限制性格更好。

​

​

Answer 1

添加max-width属性，其值为{n}ch。例如：max-width: 100ch。然后，应用white-space: nowrap和overflow: hidden删除溢出字符。为了在末尾添加一些点，添加text-overflow: ellipsis属性。

您定义的值之后的任何字符都将被移除。

​

p {
  max-width: 30ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>

​

如果要限制行数，可以使用line-clamp属性而不是设置字符数(max-width: {n}ch)：

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

示例：

​

div {
  max-width: 100px;
}

p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
</div>

​

Answer 2

只需根据字符串的值对JS进行处理即可。在基本的JS中，您可以这样做。在react中，您可以执行相同的操作，但在useEffect中，然后将字符串(截断与否)存储为状态值。

下面的示例将截断一个长度大于20个字符的字符串。要改变这一点，只需将两个20的部分更改为其他的东西，甚至可以将截断长度作为函数的一个参数。

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