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 设置来做到这一点，但我找不到。我还想避免 javascript 中的循环来执行此操作，因为我必须对很多 div 执行此操作，并且我不希望性能受到影响。

除非我用错了，否则空白似乎没有帮助。

提前谢谢了！

文本对齐：对齐；

本身没有帮助：http: //jsfiddle.net/Q7gcb/4/

最大宽度 + 文本对齐：对齐；

也不起作用：http: //jsfiddle.net/Q7gcb/5/

4

4 回答 4

1 
div {text-align: justify;}​

你也应该设置宽度值。

于 2012-11-28T21:40:37.420 回答
1

我相信你要找的东西都可以在这里找到

“在 DTP 和文字处理应用程序中，此选项称为‘强制对齐’。不幸的是，这不是 CSS 中的选项。”

于 2012-12-11T18:50:52.300 回答
0

将max-width和设置text-align为justify。

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

演示

于 2012-11-28T21:50:41.360 回答
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 回答