certificate一个div的最后一行?
我不认为这是为什么? 这个问题是重要的…但我需要做的是text-align:justify
从DIV文本的最后一行。 通常情况下,div的最后一行(或第一行,如果没有其他行,这是当前情况)是不正确的,但左alignment。 我知道这可能根本没有意义,但是我绝对需要最后一行才是合理的!
这是一个在IE6 +中的跨浏览器方法
它结合了text-align-last:justify; 这是由IE支持的一种变体:在伪内容方法之后。 它包括一个修复,以删除一行文本元素后添加额外的空间。
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/
这是我能find的最干净的黑客。 你的旅费可能会改变。
我在IE8,Firefox,Chrome,Opera,Safari中testing了我的例子。
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
比它需要更高的线。
这个方法对我有用:
这个把戏被称为“本正义” *
那么,这不是所有的CSS,你需要添加一些额外的行结束。 上面的标题的标记是…
<h1 id="banner"> How to justify a single line of text with css<span> </span> </h1>
在行末尾的小增加通过开始新行触发行的理由。 附加内容( <span> </span>
)被强制到一个新行上,因为空格宽度为1000px(使用word-spacing),
被对待像一个字。 额外的行不显示,因为字体大小设置为0px。
更新,23-Jan-11:我刚刚更新了标记以在跨度内包含一个空格,并将跨度的字体大小设置为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; }
*除非有证据表明这种技术已经发表过,否则我将这一技术命名为“本理”,并宣布免费使用。
本·克莱,2010年1月。
资料来源: http : //www.evolutioncomputing.co.uk/technical-1001.html
CSS3以text-align-last
的forms为此提供了一个解决scheme,参见http://www.w3.org/TR/2010/WD-css3-text-20101005/#text-align-last
比方说,我正在与“出于某种原因”(有一个相当好的理由)只能有一行的divs工作….我想certificate他们的理由。
为什么不使用text-align: justify;
? 它确实certificate了每一行。 即使只有一条线。
编辑 :我想你正在寻找这个 ,正如scragz所说的。 无论如何,这只适用于IE 5.5和IE 6。
有一个CSS3 IE 5.5 / 6(谢谢, CSS3.com ,不!)属性称为text-justify
,可以做你想要的:
text-justify: distribute-all-lines;
不确定浏览器支持。 什么是扯皮。
我遇到了一个问题,上面的答案有一些工作,但在底部添加了一个可见的新行 – 这是不可接受的,因为该框有一个背景颜色。 我用下面的代码修正了理由:
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>
当!DOCTYPE是HTML5时,Kristin和Jacqui的解决scheme会导致一个额外的换行符,这很难删除。 如果它困扰你(像我),这里还有另一个想法:
<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进行了testing。
如果closures的div标签之后是换行符,或者div标签使用了等效的底部填充/页边距,那么您可以简单地将其replace为一个非空行的不可见行,如下所示:
<div>This last line is now for all intents and purposes justified </div>
虽然这可能不是最漂亮的解决scheme,但它可能是最安全的跨浏览器解决scheme,因为它不依赖任何非标准的调整。 只要确保有足够的“nbsp”字符总是会导致换行,同时保持在单行所允许的最大值的安全范围内。
至于为什么要这样呢,那么我可以把自己的理由告诉给谁呢? 有些情况下,你想分割连续的文本块或文本段落,以插入图像,表格或在我的情况下自定义脚注正好在分页符之前。 如果你这样做的话,那么你希望在中断之前的最后一行被certificate是正确的,因为文本将在任意中断之后立即恢复。 在我的情况下,脚注的长度是可变的,所以我必须手动input它们,因此我还需要手动分割文本块,并在中断之前手动强制最后一行的alignment方式。 我不知道任何自动化解决scheme,也是跨浏览器兼容的,但添加一堆非rest空间至less为我做的工作…