“完美”的矩形动态文本[重复]答案

【问题标题】："Perfectly" rectangular dynamic text [duplicate]“完美”的矩形动态文本[重复]
【发布时间】：2012-11-16 21:10:24
【问题描述】：

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

【问题讨论】：

设置最大宽度，然后对齐文本？
我猜你的意思不是 text-align:justify？
我相信这可能会回答你的问题：stackoverflow.com/questions/6205109/justify-text-to-fill-a-div
不能手动设置。例如，在 IE9 或 Mac 上的 Chrome 中，<div style="width:530px;"> 示例文本是三行长，而不是两行（由于不同的文本呈现方式）。我认为你需要 JavaScript。
感谢您的帮助和注意。已经尝试过javascript。它使我的页面断断续续。大量动态 div。

标签： css dynamic text width containers

【解决方案1】：

div {text-align: justify;}

你也应该设置宽度值。

【讨论】：

【解决方案2】：

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

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

Demo

【讨论】：

【解决方案3】：

试试这个。

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/

【讨论】：

我很欣赏您的创意，但我宁愿缩短 div 使其看起来像 530px 示例。感谢您的尝试！
@JoeCoderGuy 没问题，祝你好运

【解决方案4】：

相信你要找的可以找到Here

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

【讨论】：