如何更新文本時更改P標籤的CSS高度？

我在一個網站上有一個段落標籤，我在其中替換了點擊按鈕時的內容（使用Javascript）（即：用報價＃2取代報價＃1）。我不是簡單地擴展當前文本，有時新文本可能會比當前文本更少，有時更多。如何更新文本時更改P標籤的CSS高度？

在某些情況下，文本從短到長的數量會導致網站上一個相當不穩定的移動，因爲<p>標籤會立即增加它的高度。

我想加入2S可能會解決它的CSS過渡，但它沒有任何效果：

p.my-text { 
    transition: 2s; 
}

有沒有一種方法可以平穩過渡文本時更新<p>標籤的高度？

來源

2017-07-17 David

您可以添加添加的過渡？ –

@Béranger完成。 – David

https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css – Danield

不能使用在height: auto;的過渡，而是你可以使用之間的過渡給定max-height（例如0）和另一max-height比一個更大的預期。請參閱https://codepen.io/LFeh/pen/ICkwe

來源

2017-07-17 08:48:35 Tibo

您可以添加max-height值來創建轉換。

看看這個代碼示例。

var paragraph; 
 
(() => { 
 
\t paragraph = document.getElementById('paragraph'); 
 
    paragraph.style.maxHeight = paragraph.scrollHeight + "px"; 
 
\t setInterval(() => { 
 
    
 
    \t paragraph.innerHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor nisl sit amet turpis euismod, sit amet vulputate sem mollis. Duis vitae scelerisque magna, et varius neque. Suspendisse at velit in urna tincidunt pellentesque feugiat non erat. Etiam malesuada sapien sapien, sed finibus orci rhoncus sed. Morbi ultrices scelerisque malesuada. Phasellus non dictum ipsum, sed malesuada lacus. Cras dignissim, lectus vel volutpat vulputate, felis ligula molestie velit, at tempor risus eros et orci. Ut malesuada, libero sit amet imperdiet volutpat, tellus orci tempus enim, in luctus diam mi a enim. Phasellus arcu urna, semper sit amet lobortis non, tempus eget felis. Donec ullamcorper nibh feugiat, porttitor mauris ac, imperdiet mi. Nam lectus felis, efficitur quis turpis non, dignissim feugiat purus."; 
 
    
 
    \t paragraph.style.maxHeight = paragraph.scrollHeight + "px"; 
 
    }, 1000); 
 
\t 
 
})();

#paragraph { 
 
    background-color: #eeeeee; 
 
    transition: max-height 2s; 
 
    overflow:hidden; 
 
}

<p id="paragraph" > 
 
lorem ipsum dolor 
 
</p>

請注意，您必須添加overflow: hidden

來源

2017-07-17 09:17:27

這真的很接近，但是，如果文本從大到小，它不起作用。 – David

@David如果你知道高度，你可以使用'height'屬性來代替'max-height'，它可以工作在大到小的情況下。但它不適用於'height：auto' –

如何更新文本時更改P標籤的CSS高度？

回答

相關問題