0

高さを増やさずに動的に挿入されたテキストが「完全な」長方形になるように、コンテナー (できれば div) を短くすることは可能ですか?

<div style="width:800px;">
<div>I'd like these words to look like below, but I'd like to "automatically" set it with a few lines of CSS rather than with jQuery or some other computationally intensive alternative.</div>
</div>
<br>
<div style="width:800px;">
<div style="width:530px;">I'd like these words to look like below, but I'd like to "automatically" set it with a few lines of CSS rather than with jQuery or some other computationally intensive alternative.</div>
</div>​

http://jsfiddle.net/Q7gcb/

可能であれば単一の CSS 設定でこれを行いたいのですが、見つかりません。また、多くの div に対してこれを行う必要があり、パフォーマンスを低下させたくないため、これを行うために JavaScript でループを回避したいと考えています。

間違って使用しない限り、空白は役に立たないようです。

よろしくお願いします！

テキスト整列:両端揃え;

それだけでは役に立ちません: http://jsfiddle.net/Q7gcb/4/

max-width + text-align:justify;

どちらも機能しません: http://jsfiddle.net/Q7gcb/5/

4

4 に答える 4

1 
div {text-align: justify;}​

また、幅の値も設定する必要があります。

于 2012-11-28T21:40:37.420 に答える
1

私はあなたが探しているものがここで見つかると信じています

「DTP およびワープロ アプリケーションでは、このオプションは 'force justify' として知られています。残念ながら、これは CSS のオプションではありません。」

于 2012-12-11T18:50:52.300 に答える
0

これを試して。

HTML

<div style="width:800px;">
<div>I'd like these words to look like below, but I'd like to "automatically" set it with a few lines of CSS rather than with jQuery or some other computationally intensive alternative.</div>
</div>
<br>
<div style="width:800px;">
<div style="width:530px;">I'd like these words to look like below, but I'd like to "automatically" set it with a few lines of CSS rather than with jQuery or some other computationally intensive alternative.</div>
</div>
<br>
<div style="width:800px;">
<div class="justify">I'd like these words to look like below, but I'd like to "automatically" set it with a few lines of CSS rather than with jQuery or some other computationally intensive alternative.</div>
</div>​

CSS

.justify{
    text-align: justify;
    text-align-last: justify;
}

.justify:after {
    content: "";
    display: inline-block;
    width: 100%;
}​

http://jsfiddle.net/Q7gcb/7/

于 2012-11-28T21:56:54.490 に答える
0

max-widthとを に設定text-alignしjustifyます。

div {
    max-width: 500px;
    text-align: justify;
}

デモ

于 2012-11-28T21:50:41.360 に答える