Question

我不认为“为什么？”这个问题很重要......但我需要做的是text-align:justify来自 DIV 的最后一行文字。通常情况下，div的最后一行（或第一行，如果没有其他行，这是当前情况）不合理，但是左对齐。我知道它可能没有任何意义，但我绝对需要最后一行才有道理！

Answer 1

这是一个适用于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/

Answer 2

这是我能想出的最干净的黑客/发现。您的里程可能会有所不同。

我在IE8，Firefox，Chrome，Opera，Safari中测试了我的例子。

IE7没有实现:after伪类，所以它不会在那里工作。

如果您需要IE7支持，可能会将" ___"放在span末尾的无关div内（使用JS？）。

Live Demo（see code）

<强> 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的线条比它需要的更高。

Answer 3

这种方法对我有用：

这个技巧被称为“Ben Justification”^*

嗯，使用css并不是全部，你需要在行尾加一点额外的东西。上述标题的标记是......

<h1 id="banner">
    How to justify a single line of text with css<span> &nbsp;</span>
</h1>

线末端的少量加法通过开始换行来触发线的对齐。附加内容（<span>  </span>）被强制转换为新行，因为空间宽度为1000px（带字间距）， 被视为单词。附加行不显示，因为fontsize设置为0px。

更新，2011年1月23日：我刚刚更新了标记，在跨度内包含一个空格，并为字节大小设置为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 Justification”，并声明所有人都可以免费使用。

Ben Clay，2010年1月。

来源：http://www.evolutioncomputing.co.uk/technical-1001.html

Answer 4

CSS3以text-align-last的形式为此提供解决方案，请参阅http://www.w3.org/TR/2010/WD-css3-text-20101005/#text-align-last

Answer 5

有一个名为CSS3.com的 ~~CSS3~~ IE 5.5 / 6（感谢，text-justify，NOT！）属性，它可以满足您的需求：

text-justify: distribute-all-lines;

~~不确定浏览器支持。~~什么是ripoff。

Answer 6

假设我正在使用“出于某种原因”的div（有一个很好的理由）只能有一行....我想证明它们的合理性。

为什么不使用text-align: justify;？ ~~它确实证明了每一行。即使只有一行。~~

编辑：我认为你正在寻找this，正如scragz所说。无论如何，这仅适用于IE 5.5和IE 6。

Answer 7

我有一个问题，上面的一些答案有效，但在底部添加了一条可见的新线 - 这是不可接受的，因为盒子有背景颜色。我用以下代码修正了理由：

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>

Answer 8

当！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进行了测试。

Answer 9

如果结束div标签后面跟一个换行符或者如果div标签使用了等效的底部填充/边距，那么你可以简单地用一个不间断的不间断行替换它，例如： / p>

<div>This last line is now for all intents and purposes justified &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>

虽然这可能不是最漂亮的解决方案，但它可能是最安全的跨浏览器解决方案，因为它不依赖于任何类型的非标准调整。只要确保有足够的＆＃34; nbsp＆＃34;字符总是会导致换行，同时保持在一条线上允许的最大安全范围内。

至于为什么人们会想要这个，好吧，我可以给出自己感兴趣的理由;在某些情况下，您想要分割连续的文本块或文本段落，以便在分页符之前插入图像，表格或在我的情况下自定义脚注。如果你这样做，那么你想要在中断之前的最后一行被证明是合理的，因为文本将在任意中断之后立即恢复。在我的例子中，脚注的长度是可变的，所以我必须手动输入它们，因此我还需要手动分割文本块并在中断前手动强制对齐最后一行。我不知道任何自动化解决方案也是跨浏览器兼容的，但添加一堆不间断的空间对我来说至少可以帮助我...

证明div的最后一行？

9 个答案: