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

假设我有一个大小为100px x 20px的

div

，其中的文本随机设置为不同的长度，即一些文本部分长，一些短

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

我的目标

• 如果文本小于

  div

  容量，则该文本的

  字体大小将最大化，以尽可能适合
  div
  ，而无需剪裁/剪切
  
  

• 但是如果文本大小大于

  div

  容量，那么我想截断文本并追加

  。

  （仅3点）

---

对于第一部分，我建议将文本包装在

中，这样您就可以获取其

偏移网络宽度

，然后可以将其

字体大小

样式属性设置为

200/span.offsetWidth

。 但是请记住，这是一个粗略的计算，需要进行一些近似计算，也许您希望使用190或195而不是200做得更好

对于第二部分，只需设置

overflow:hidden；文本溢出：省略号；空白：nowrap。
请记住，省略号点不会出现在较旧的Firefox客户端中。
我认为您需要另一个（内部）
才能检查文本的高度

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

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


一些文本

//css
#mainDiv
{
宽度：200px；
高度：50px；
溢出：隐藏；
}

然后您将需要一些简单的函数（如下所示）：

//伪代码
函数doCheck（）
{
如果（“.inner.height>”#mainDiv.height）截断（）
else increaseSize（）
}
函数truncate（）
{
for（i=1；我认为有点类似，可以给你一个开始。
//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();