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

【问题标题】：Truncate/increase font size within a div so it fits截断/增加 div 中的字体大小，使其适合
【发布时间】：2012-05-21 22:26:32
【问题描述】：

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

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

我的目标

如果文本小于div 容量，则该文本的font-size 将最大化以尽可能适合div，而无需剪切/剪切。
但如果文本大小大于 div 容量，那么我想截断文本并附加 ...（仅 3 个点）。

【问题讨论】：

我觉得this post有点像，可以给你个开端。

标签： javascript jquery html css

【解决方案1】：

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

对于第二部分，只需设置overflow: hidden; text-overflow: ellipsis; white-space: nowrap;。请记住，省略号不会出现在旧版 Firefox 客户端中。

【讨论】：

【解决方案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();

【讨论】：