在div中截斷/增加字體大小以使其適合

Question

假設我有一個大小為100px x 20px的div ，並且其中的文本隨機設置不同的長度，即一些文本部分很長而一些很短。

因此，當文本量較少時，div內有空格。 如果有大量文本，它會溢出。

我的目標

• 如果文本小於div容量，那么該文本的font-size將最大化以盡可能地適應該div ，而不會剪切/剪切 。

• 但是如果文本大小大於div容量，那么我想截斷文本並追加... （僅限3個點）。

Answer 1

對於第一部分，我建議將文本包裝在<span>以便可以獲取其offsetWidth ，然后可以將其font-size樣式屬性設置為200 / span.offsetWidth 。 但請記住，這是一個粗略的計算，有一些近似值，也許你想用190或195而不是200做得更好。

對於第二部分，只需設置overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 。 請記住，省略號的點不會出現在較舊的Firefox客戶端中。

Answer 2

我想你需要另一個（內部） <div>才能檢查文本的高度。

<div id="mainDiv">
    <div class="inner">
        <p>Some text</p>
    </div>
</div>

//css
#mainDiv
{
    width: 200px;
    height: 50px;
    overflow: hidden;
}

然后你需要一些簡單的函數（像這樣）：

//pseudocode

function doCheck()
{
    if (".inner".height > "#mainDiv".height) truncate()
    else increaseSize()
}

function truncate()
{
    for (i = 1; i <= ".inner".wordCount)
    while (".inner".height <= "#mainDiv".height)
    {
        addOneMoreWord() + " …";
        if (".inner".height > "#mainDiv".height) removeLastWord()
    }
}
//similar thing for increaseSize();