javascript - 截断/增加 div 中的字体大小，使其适合

Question

假设我有一个div大小100px x 20px和其中的文本随机设置不同的长度，即一些文本部分很长，一些很短。

因此，当文本量较少时，div 内就会出现空白。如果有大量文本，它就会溢出。

我的目标

• 如果文本小于div容量，则该font-size文本的 将最大化以尽可能适应该容量，div而无需剪切/剪切。

• 但是，如果文本大小大于div容量，那么我想截断文本并附加...（仅 3 个点）。

Answer 1

对于第一部分，我建议将文本包装在 a 中<span>以便您可以获取它offsetWidth，然后您可以将其font-size样式属性设置为200 / span.offsetWidth. 但请记住，这是一个粗略的计算，做了一些近似，也许您希望使用 190 或 195 而不是 200 做得更好。

对于第二部分，只需设置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();