我不认为这个问题的"为什么?"很重要...但是我需要做的是，将一个DIV中最后一行的文本设置为text-align:justify。通常情况下，DIV的最后一行（或者如果没有其他行，则是第一行）并不会被调整对齐，而是左对齐。我知道这可能一点也不合理，但我绝对需要最后一行文字对齐！
为什么需要对 div 的最后一行进行调整？
44
- JCOC611
5
9个回答
85
这里有一个兼容各种浏览器的方法，适用于IE6及以上版本。
它结合了text-align-last: justify;（支持IE）和一种:after伪类方法。它还包括一个修复方案，以消除单行文本元素后面添加的额外空间。
CSS:
p, h1{
text-align: justify;
text-align-last: justify;
}
p:after, h1:after{
content: "";
display: inline-block;
width: 100%;
}
如果你只有一行文本，可以使用以下方法来避免上述 CSS 会导致的空白行：
h1{
text-align: justify;
text-align-last: justify;
height: 1em;
line-height: 1;
}
h1:after{
content: "";
display: inline-block;
width: 100%;
}
更多细节请参考：http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justify-last-line-paragraph-text/
- Kristin
5
这是一个很棒的技巧。我必须承认，使用它让我感觉有点像黑客，但这确实是一个聪明的技巧，已经成为我的武器库之一。另外，今天我遇到了另一种情况（就在我发现这个技巧的同一天），这个技巧派上了用场。我正在使用
dl，结果发现空的 dd 破坏了格式（高度为0），而一个隐藏的 . 确实解决了问题。 - Anthony这不是一个跨浏览器的解决方案。它只在基于Gecko的浏览器和IE中有效。 - Julian F. Weinert
2这将在每个p下面添加一个额外的空行，有什么办法可以解决这个问题？ - Himmators
@KristofferNolgren 在大多数情况下，将
p元素的margin-bottom减小（甚至设置为0）应该足够解决问题。 - Brilliand@KristofferNolgren，你可以在以下的“p”中添加
margin-top: -1em; 。减小调整宽度后的 p 的底部边距对我没有任何作用（Chrome 34）。 - gl0311
这是我能想到/找到的最简单的hack。你的效果可能会有所不同。
我在IE8、Firefox、Chrome、Opera和Safari中测试了我的示例。
IE7不支持:after伪类，因此它在那里无法正常工作。
如果您需要支持IE7，可能将" ___"放在div结尾处的额外span中（使用JS？）可以使其正常工作。
CSS：
div {
width: 618px;
text-align: justify
}
div:after {
content: " __________________________________________________________";
line-height: 0;
visibility: hidden
}
HTML:
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dui dolor, bibendum quis accumsan porttitor, fringilla sed libero. Phasellus felis ante, egestas at adipiscing lobortis, lobortis id mi. Praesent pulvinar dictum purus. Duis rhoncus bibendum vehicula. Vestibulum mollis, metus a consectetur semper, urna enim sollicitudin lacus, vel imperdiet turpis nisl at metus. Integer iaculis pretium dui, a viverra dolor lobortis pellentesque. Aliquam quis felis nec purus semper interdum. Nam ac dolor in sem tincidunt egestas. Ut nisl tortor, laoreet eu vestibulum id, bibendum at ipsum. Maecenas elementum bibendum orci, ac eleifend felis tincidunt in. Fusce elementum lacinia feugiat.
</div>
不幸的是，这似乎会使 div 的行高比它实际需要的更高。
- thirtydot
2
很棒的想法！不幸的是，它为我所做的事情创建了太多的错误，但仍然对这样的辛勤工作竖起大拇指！我会坚持使用JS和
word-spacing，这是我能做到的最好的。 - JCOC611如果您使用JS和
word-spacing提出了可重用的东西，那么您应该将其发布在这里。我在互联网上找不到比我在这里发布的更好的解决方案。 - thirtydot9
这个方法对我很有效：
这个技巧被称为“Ben调整”* 嗯，这并不完全是所有的css，你需要在行末添加一些额外的标记。上面标题的标记是...
Ben Clay，2010年1月。
来源：http://www.evolutioncomputing.co.uk/technical-1001.html
这个技巧被称为“Ben调整”* 嗯，这并不完全是所有的css，你需要在行末添加一些额外的标记。上面标题的标记是...
<h1 id="banner">
How to justify a single line of text with css<span> </span>
</h1>
在行末加上一个小的附加内容可以通过开始新的一行来触发该行的对齐。附加内容 (<span> </span>) 被强制换到新行，因为空格被设置为 1000px 宽（使用 word-spacing），而 被视为单词。由于字体大小设置为 0px，所以附加行不会显示。
更新，2022年7月22日：我刚刚更新了标记，在 span 中的 后面添加了一个空格，并将 span 的字体大小设置为 1px：这是为了解决 IE8 的问题。感谢 Mamoun Gadir 指出了 IE 的问题。
上面标题的 CSS 代码如下：
h1#banner {
border: 1px solid #666;
display: block;
width: 100%;
height: 1em;
font-size: 1em;
line-height: 1em;
margin: 20px auto;
padding: 0px ;
text-align: justify ;
}
h1#banner span {
font-size: 1px ;
word-spacing: 1000px;
}
Ben Clay，2010年1月。
来源：http://www.evolutioncomputing.co.uk/technical-1001.html
- Jacqui
5
CSS3提供了一种解决方案：
text-align-last，请参见http://www.w3.org/TR/2010/WD-css3-text-20101005/#text-align-last。- kander
3
这仅适用于 div 中的文本 完全 对齐的情况。 “此属性描述了当将‘text-align’设置为‘justify’时，块的最后一行或强制换行之前的行如何对齐”。当您想要将最后一行左对齐或右对齐以及整个文本对齐时，这非常有用。 - Donovan
阅读问题，我看到“通常，div的最后一行（或者如果没有其他行，则为第一行，这是当前情况）不会被调整对齐，而是左对齐。”-由于通常整个div都是左对齐的，因此我在这里做出了假设，即读者的意思是通常，在调整DIV时，最后一行左对齐而不是调整对齐。在这种情况下，“text-align-last”似乎是使用最少侵入性的工具。 - kander
很遗憾，在Safari中不支持此功能。 - Gavin
1
我遇到了一个问题，一些以上的答案有效，但是在底部添加了一个可见的新行-这是不可接受的，因为框有背景颜色。我使用以下代码修复了对齐：
jQuery:
$(".justify").each(function(index, element) {
var original_height = $(this).height();
$(this).append("<span style='display: inline-block;visibility: hidden;width:100%;'></span>");
$(this).height(original_height);
});
HTML：
<div class="justify" style="width:100px; background-color:#CCC">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
- Destralak
1
有一个名为text-justify的属性，可以在IE 5.5/6（感谢CSS3.com，不是！）中实现你想要的效果。
text-justify: distribute-all-lines;
不确定浏览器支持。真是一个骗局。
- scragz
1
显然CSS3.com需要更好地标记它们的属性！ - scragz
1
假设我正在使用只能有一行的div（有一个非常好的理由），而我想要对齐它们。为什么不使用
text-align: justify;？即使只有一行，它也会对齐每一行。
编辑：我认为你正在寻找this，正如scragz所说。无论如何，这仅适用于IE 5.5和IE 6。
- Donovan
0
当!DOCTYPE是HTML5时，Kristin和Jacqui的解决方案会导致额外的换行符，很难去除。如果这让你感到困扰（就像我一样），这里有另一个想法：
<div style="display: flex;">
Lorem <span style="flex:1;"></span>
ipsum <span style="flex:1;"></span>
dolor <span style="flex:1;"></span>
sit...
</div>
它还有另一个缺点：仅适用于单行文本，并且需要修改上面显示的内容，这并不总是可行/实际的。但在某些情况下，这不是问题（就像在我的情况下一样）。甚至可以有助于控制插入额外空间的位置。当然，样式仅为简洁起见内联。我只在最近的FFox / IE中进行了测试。
- robert4
0
如果闭合的div标签后面跟着一个换行符，或者div标签使用了等效的底部填充/边距，那么您可以用一个包含非断空格的结尾不可见行来替换它。
<div>This last line is now for all intents and purposes justified </div>
虽然这可能不是最美观的解决方案，但它很可能是最安全的跨浏览器解决方案，因为它不依赖于任何非标准调整。只需确保有足够的“nbsp”字符以始终引起换行，同时保持在单行允许的最大安全边距内。
至于为什么要这样做，我可以给出自己的理由，对于那些感兴趣的人来说；有些情况下，您想将连续的文本块或文本段分成几部分，以插入图像、表格或者像我一样的自定义脚注，就在页面断点之前。如果您这样做，那么您希望在断点之前的最后一行被调整，因为文本将在任意断点之后恢复。在我的情况下，脚注的长度是可变的，所以我必须手动输入它们，因此我还需要手动分割文本块并手动强制对齐断点之前的最后一行。我不知道是否有任何自动化的解决方案也跨浏览器兼容，但添加一堆不间断空格对我来说已经足够了...
- abvgd
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
word-spacing和JavaScript来实现这个目标... - JCOC611text-align-last: justify;。 - di3