更新了下面的“未来”解决方案信息; 仍未完全支持。
当前解决方法(IE8 +,FF,Chrome已测试)
相关CSS
.prevNext { text-align: justify;}.prevNext a { display: inline-block; position: relative; top: 1.2em; }.prevNext:before{ content: ''; display: block; width: 100%; margin-bottom: -1.2em; }.prevNext:after { content: ''; display: inline-block; width: 100%;}说明
在
display: block上
:before有负下边距元素拉文达一行的高度,它消除了多余的线的线,但是置换文本。然后,
position:relative在
inline-block元素上使用时,将抵消位移,但不增加额外的行。
尽管css本身不能直接访问
line-height“单位”,但
em在
margin-bottom和
top设置中的使用很容易容纳任何
line-height作为乘数值之一的给定值。因此
1.2,
120%或
1.2em都 等于 在计算 相对于
line-height,这使得利用
em这里一个不错的选择,因为即使
line-height: 1.2是一组,然后
1.2em对
margin-bottom和
top匹配。良好的编码以规范化站点的外观意味着
line-height应在某个点明确定义,因此,如果使用任何乘数方法,则等效
em单位的值将与相同
line-height。并且如果
line-height设置为非
em``px可以设置的长度(例如)。
使用诸如LESS或SCSS之类的css预处理器绝对具有变量或mixin可以帮助使这些值与适当的值保持匹配
line-height,或者可以使用javascript来动态读取这些值,但实际上,
line-height应该在使用此值的上下文中知道,并在此处进行适当的设置。
更新以缩小文本(无空格)问题
库比(Kubi)的评论指出,删除
<a>元素之间的空格的html缩小会导致对齐失败。一个在内部伪空间
<a>标签没有帮助(但预计,随着空间的内部发生
inline-block元件),
<wbr>之间添加
<a>标签没有帮助(可能是因为休息没有必要到下一行),因此,如果需要最小化,然后解决方案是硬编码的不间断空格字符-
其他空格字符(如稀薄空间和en空格)不起作用(令人惊讶地)。
即将到来的清洁解决方案
其中
webkit是落伍(作为第一写这)为:
.prevNext { text-align: justify; -moz-text-align-last: justify; -webkit-text-align-last: justify; text-align-last: justify; }它适用于FF 12.0+和IE8 +(IE7中为Buggy)。
对于Webkit的,作为39版(至少,可能有早期蹑手蹑脚),它支持它 没有 了
-webkit-,但是扩展 仅 当 _用户_启用了实验性的功能(可在完成
chrome://flags/#enable-experimental-web-platform-features)。有传言说版本41或42应该获得完全支持。由于
webkit尚未得到无缝支持, 因此它仍然只是部分解决方案。但是,我认为我应该发布它,因为它可能对某些人有用。



