I've got a CSS helper class that is designed to force the last line of "text" (or in the intended usage, inline block divs) to become ju开发者_开发问答stify-aligned as well as the rest of them.
Here's the code I've got:
.justify-all-lines
{
text-align: justify;
/* IE-only properties that make the :after below unnecessary (we need this because IE 6/7 don't support :after, though) but if they both apply it'll be fine */
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
.justify-all-lines > *:last-child:after
{
display: inline-block;
width: 100%;
content: 'hello';
}
.blocky
{
display: inline-block;
/* Make inline block work in IE 6/7 */
zoom: 1;
*display: inline;
}
This is intended for use like so:
<div class="justify-all-lines">
<div class="blocky">There is stuff in here.</div>
<div class="blocky">There is stuff in here.</div>
<div class="blocky">There is stuff in here.</div>
<div class="blocky">There is stuff in here.</div>
<div class="blocky">There is stuff in here.</div>
<div class="blocky">There is stuff in here.</div>
<div class="blocky">There is stuff in here.</div>
<div class="blocky">There is stuff in here.</div>
<div class="blocky">There is stuff in here.</div>
<div class="blocky">There is stuff in here.</div>
</div>
However, I see the 'hello' show up INSIDE the last "blocky" div instead of after the last "blocky" div. What am I doing wrong?
Working solution:
.justify-all-lines
{
/* This element will need layout for the text-justify
* to take effect in IE7 (and possibly previous versions);
* this will force it, for more info Google "hasLayout in IE"
*/
overflow: hidden;
text-align: justify;
/* For IE6 to IE7 since they don't support :after */
-ms-text-justify: distribute-all-lines; /* IE8+ */
text-justify: distribute-all-lines; /* IE5+ */
}
.justify-all-lines:after
{
/*
* We don't need IE6 and IE7 inline-block hack support here
* since they don't support :after anyways (the text-justify
* properties for them are above)... IE8 and above have native
* inline-block support so for IE8+, both the text-justify and
* :after will take effect but it doesn't have any negative
* effects since this element is invisible
*/
display: inline-block;
width: 100%;
content: '.';
font-size: 0;
height: 0;
line-height: 0;
visibility: hidden;
}
精彩评论