Question

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


因此,当文本数量更少时, div 内就有空白。如果文本数量大,它就会溢出。
My objectives

如果文本小于 div  容量,那么该文本的 font-size 将尽可能地尽量适合该 div ,而不使用  clipping/claypping 。

但如果文本大小大于 div  能力,那么我想将 < emgener > truncate  文本附加为 ...  (3点仅) 。

Answer 1

For the first part, I d suggest to wrap the text in a <span> so you can get its offsetWidth, then you can set its font-size style property to 200 / span.offsetWidth. Keep in mind, though, that this is a rough calculations with some approximations being made, and maybe you want to do better using 190 or 195 instead of 200.

For the second part, just set overflow: hidden; text-overflow: ellipsis; white-space: nowrap;. Keep in mind that the ellipsis dots don t appear in older Firefox clients.

Answer 2

我想你需要另一个( 内部) < code@ lt; 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();

My objectives

友情链接