证明div的最后一行？

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？).

现场演示(见代码)

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> &nbsp;</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",并宣布所有人都可以免费使用.

本·克莱,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