3

divサイズとテキストが100px x 20px異なる長さでランダムに設定されているとします。つまり、一部のテキストセクションは長く、一部は短いです。

したがって、テキストの量が少ない場合、div 内に空白スペースができます。また、文字数が多いとオーバーフローします。

私の目標

  • divテキストが容量よりも少ない場合、そのテキストの は、クリッピング/カットなしで可能な限りその容量font-size内に収まるように最大化されます。div

  • しかし、テキストサイズが容量よりも大きい場合は、テキストdivを切り捨てて追加します...(3 つのドットのみ)。

4

2 に答える 2

4

最初の部分では、テキストをで囲むことをお勧めします。<span>そうすれば、テキストを取得できます。次に、そのスタイルプロパティをにoffsetWidth設定できます。ただし、これは概算を行った大まかな計算であり、200ではなく190または195を使用した方がよい場合があることに注意してください。font-size200 / span.offsetWidth

2番目の部分では、を設定するだけですoverflow: hidden; text-overflow: ellipsis; white-space: nowrap;。省略記号のドットは、古いFirefoxクライアントには表示されないことに注意してください。

于 2012-05-21T09:00:51.710 に答える
0

<div>文字の高さを確認できるようにするには、もう1つ（インナー）が必要になると思います。

<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();
于 2012-05-21T09:08:27.650 に答える