CSS equivalent to Photoshop's Justify-All

拟墨画扇 提交于 2019-11-29 14:34:17

问题


I'd like to take an h2 element and span it's text across the width of it's div.

text-align:justify;

only spreads the text if it's width is greater than the width of it's container... kind of like Photoshop's justify-left


回答1:


CSS:

h2 {text-align: justify;}
h2 span {width: 100%; display: inline-block;}

HTML:

<h2>This is a h2 heading<span></span></h2>

Note that this adds a unvisible extra line, resulting in too much height. You might want to compensate for that:

h2 {text-align: justify; height: 1.15em;}

And for a very neat markup, only working for browsers other then IE7 or below, you could use the ::after selector:

h2::after {
    width: 100%;
    display: inline-block;
    content: ".";
    visibility: hidden;
}

See demo fiddle of all three solutions.




回答2:


Time machine answer for when the CSS 3 Text Module becomes a recommendation:

text-align: justify;
text-align-last: justify;

It won't be of much use before then, though.



来源:https://stackoverflow.com/questions/6632789/css-equivalent-to-photoshops-justify-all

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!