我有一個展示我的產品的頁面，但是這個產品的描述很長
我希望當它減少 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的問題是限制并將...放在最后，描述必須到行尾才能作業，我認為按字符限制更好
uj5u.com熱心網友回復：
添加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>uj5u.com熱心網友回復：
只需根據字串的值用JS來做。在基礎 JS 中，你可以做這樣的事情。在反應中，您可以做同樣的事情，但在 useEffect 中，然后將字串（截斷或不截斷）存盤為狀態值。
下面的示例將截斷長度大于 20 個字符的字串。要改變這一點，只需將兩個 20 更改為其他值，甚至可以將截斷長度作為函式的引數。
const truncateString = (string) => {
if (string.length > 20) {
const truncatedString = `${string.slice(0, 20)}...`;
setStringSomewhere(truncatedString)
} else setStringSomewhere(string);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/522784.html
下一篇：如何在R中創建月度周期