对齐段落文本 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21668120/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Justify Paragraph Text HTML
提问by HelloWorld
How would one justify this text?? I have tried and searched for days to get something so simple to work..
如何证明这段文字的合理性？？我已经尝试并搜索了几天来获得如此简单的工作。.
Ex:
前任：
HTML:
HTML：
<div id="justify">
<p>I just want this to justify..</p>
</div>
CSS:
CSS：
#justify {
width: 100%;
background: #D33;
}
#justify p {
margin: 0 auto;
max-width: 70%;
list-style: disc outside none;
text-align: justify;
display: list-item;
background: #ccc;
}
Here on JSFiddle:
在 JSFiddle 上：
Any help would be much appreciated.
任何帮助将非常感激。
采纳答案by Patrick Eaton
#justify p:after {
content: "";
display: inline-block;
width: 100%;
}
Through some HTML Trickery, this should work. I found it on a blog post ages ago when I had a similar problem. Check it out on the JSFiddle
通过一些 HTML Trickery，这应该可以工作。多年前，当我遇到类似问题时，我在博客文章中找到了它。在 JSFiddle 上查看
回答by jayjojayson
That's simple, put the text in a <p>an edit this in CSS:
这很简单，将文本<p>放入 CSS 中的编辑中：
HTML:
HTML：
<div>
<p id="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.ultricies n.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.ultricies n.</p>
</div>
CSS:
CSS：
div {
height:200px;
width:350px;
}
#justify {
text-align: justify;
}
现场演示。
回答by Sherwood Botsford
According W3C school text-justify is only supported on IE, but on that since IE 5.5
根据 W3C school text-justify 仅在 IE 上受支持，但自 IE 5.5 起
text-align can specify justification, as mentioned above, but some cautions:
text-align 可以指定对齐方式，如上所述，但有一些注意事项：
In all browsers I've checked justification is handled by increasing interword spacing. The typical amount of surplus space is 2-4 characters. Divided up on a typical line of 10 words or so, this looks tolerably ok.
On lines with fewer words the surplus space has be absorbed in fewer spaces. The result is large gaps. This is a problem in multi-column layouts, or captions under portrait oriented pictures.
在我检查过的所有浏览器中，对齐方式都是通过增加字间距来处理的。典型的剩余空间量为 2-4 个字符。分成 10 个字左右的典型行，这看起来还可以。
在单词较少的行中，多余的空间被更少的空间所吸收。结果是大的差距。这是多列布局或纵向图片下的标题中的问题。
FWIW on a good DTP program, the space for justifying is split between the inter-word spaces, and the inter letter spacing. Good fonts have in internal table of kerninghints to control this spacing. (You can't put as much space between "Y" and "o" as you can between "m" and "n" without it looking odd.)
FWIW 在一个好的 DTP 程序上，对齐的空间在字间空间和字母间空间之间分开。好的字体在字距调整提示的内部表中有用于控制此间距。（在“Y”和“o”之间不能像在“m”和“n”之间放置尽可能多的空格而不会使它看起来很奇怪。）
回答by Jon Erickson
<html>
<head>
<style type="text/css">
.justify {
text-align: justify;
text-justify: inter-word;
}
</style>
</head>
<body>
<div class="justify">
<p>This is justified</p>
</div>
</body>
</html>
