Question

是否可以缩短容器（最好是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/

max-width + text-align：justify;

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

Answer 1

div {text-align: justify;}

你也应该设置宽度值。

Answer 2

我相信您所寻找的内容可以找到Here

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

Answer 3

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

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

Demo

Answer 4

试试这个。

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/

“完美”矩形动态文字

4 个答案: