Question

假设我有div大小100px x 20px，其中的文字随机设置不同的长度，即某些文字部分很长而有些则很短。

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

我的目标

如果文字小于div容量，那么该文字的font-size将尽可能最大限度地适应div，而不需要 裁剪/裁剪 。
但如果文字大小超过div容量，那么我想截断文字并附加...（3个点）只）。

Answer 1

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

对于第二部分，只需设置200 / span.offsetWidth。请记住，省略号的点不会出现在较旧的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();

在div中截断/增加字体大小以使其适合

我的目标

2 个答案: