HTML 中文本的对齐方式答案

【问题标题】：Justification of text in HTMLHTML 中文本的对齐方式
【发布时间】：2011-07-20 20:13:04
【问题描述】：

有没有办法强制使用 CSS 将文本对齐到一行？例如：

I want to justify this text
like                   this
ButIdon'tmindifitsquashesit

我不需要人们告诉我在网页中对齐文本是一个坏主意（我有一个手动行间距和断字算法来帮助），但我只是想知道是否有解决方案，CSS 或JavaScript，来处理这个。

抱歉，我的问题不是很清楚：每一行都在一个单独的 div 元素中，例如：

<div>I want to justify this text</div>
<div>like this</div>
<div>But I don't mind if it squashes it</div>

我知道text-align: justify，但它不能解决我的问题——它根据浏览器想要的方式来证明，而不是根据我拥有的每一行。这可能会导致不适当的换行或缺少右边缘。

【问题讨论】：

你的意思是 text-align:justify;还是？
抱歉，没有很好地解释我的问题。
你用什么来帮助你使对齐的文本看起来不错？
@dylanfm：我自己实现的 Knuth-Plass 换行。
@rfw 那些 DIV 元素有固定宽度吗？

标签： javascript html css

【解决方案1】：

您不能justify 单行文本。

但是，您可以拼凑一些可能对您有用的东西。

div{width:300px; 
    border:1px solid red;
    text-align:justify; text-justify: newspaper;
}

div:after{
    content: " &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
    line-height: 0;
    visibility: hidden;
}

http://jsfiddle.net/jasongennaro/zX9x5/1/

只有在内容下方有一个额外的空行时，这才有效。

边框仅用于查看间距等。

H/T 到 @thirtydot 的想法：Justify the last line of a div?

【讨论】：

【解决方案2】：

你可以试试

text-align: justify;

在你的 CSS 中:-)

【讨论】：

好吧，如果你能够为所有的 div 定义一个共同的宽度，如果你已经处理了内容，你仍然可以使用 text-align，只是为每个单独的div.
不起作用——我有text-align: justify; width: 1000px;，它仍然是左对齐的。