在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();