41

我不认为“为什么？” 这个问题很重要......但我需要做的是DIVtext-align:justify中的最后一行文本。通常，div 的最后一行（如果没有其他行，则为当前情况下的第一行）不是对齐的，而是左对齐。我知道这可能根本没有意义，但我绝对需要最后一行是合理的！

4

9 回答 9

82

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

于 2011-07-09T20:54:40.750 回答
11

这是我能想出/找到的最干净的 hack。你的旅费可能会改变。

我在 IE8、Firefox、Chrome、Opera、Safari 中测试了我的示例。

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

如果你需要 IE7 支持，它可能会在（使用 JS？）的末尾粘上" ___"一个无关紧要的东西。spandiv

现场演示（见代码）

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>

不幸的是，它似乎使diva 线比它需要的高。

于 2011-01-23T00:26:05.100 回答
9

这种方法对我有用：

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

好吧，这并不完全是css，你需要在行尾添加一些额外的东西。上面标题的标记是...

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

行尾的小添加通过开始新行来触发行的对齐。附加内容 ( <span> &nbsp;</span>) 被强制换行，因为该空间被设置为 1000 像素宽（带有字间距）并且&nbsp;被视为一个单词。由于字体大小设置为 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”，并宣布免费供所有人使用。

本·克莱，2010 年 1 月。

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

于 2011-06-15T16:23:44.237 回答
5

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

于 2011-01-22T23:30:06.753 回答
1

有一个名为CSS3 IE 5.5/6（感谢CSS3.com，不是！）的属性text-justify可以做你想做的事：

text-justify: distribute-all-lines;

不确定浏览器是否支持。这（商品质量）真是骗人。

于 2011-01-22T23:29:58.027 回答
1

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

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

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

于 2011-01-22T23:43:19.003 回答
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>
于 2012-07-13T14:26:02.250 回答
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 对其进行了测试。

于 2014-06-27T10:39:34.433 回答
0

如果结束 div 标记后跟换行符，或者 div 标记使用等效的底部填充/边距，那么您可以简单地将其替换为结束的不可见行，例如：

<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>

虽然这可能不是最漂亮的解决方案，但它可能是最安全的跨浏览器解决方案，因为它不依赖于任何类型的非标准调整。只需确保有足够的“nbsp”字符始终导致换行，同时保持在单行允许的最大值的安全余量内。

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

于 2014-09-09T03:41:03.503 回答