1

When forcing a line of text or inline-elements to be justified within its parent by adding an ::after rule, I noticed that the parent will expand in height, to fit the pseudo-element, even if I try to prevent it:

.test {
    background-color:#ccc;
    text-align:justify;
}
.test:after {
    display:inline-block;
    content:'';
    width:100%;
    height:0;
}
<div class="test">test 1 foo bar</div>

http://jsfiddle.net/f4d7mr5t/

Here's what I tried so far and what it got me (in order of increasing despair):

  • height:0 on the pseudo-element: no change
  • line-height:0 on the pseudo-element: no change
  • overflow:hidden on the pseudo-element: no change
  • a combination of 2 or all of the above: no change
  • negative margin or padding on the pseudo-element: no change (negative padding is invalid as far as I know, but at that point I began to become desperate)
  • white-space:nowrap on the pseudo-element: no change
  • white-space:nowrap on the parent: broke the layout
  • position:relative;top:-100% on the pseudo-element: no change
  • position:absolute on the pseudo-element: broke the layout

Any suggestions other than giving the parent a fixed height or using flexbox?

mmgross
  • 3,064
  • 1
  • 23
  • 32
  • 2
    Problem and solution at the following link: http://stackoverflow.com/questions/11589590/text-align-justify-inline-block-elements-properly – Reenactor Rob Jan 23 '15 at 23:26
  • Thank you, that answers my question. The solution is not as nice I would've liked (it's actually just a hack to work around specifying an explicit height), but it'll have to do as there is apparently no nice cross-browser solution yet. – mmgross Jan 23 '15 at 23:45

2 Answers2

0

The only way I know how to solve justifying one line of text is setting height and line-height:

.test {
    background-color:#ccc;
    text-align:justify;
    height: 1em;
    line-height: 1;
}
.test:after {
    display:inline-block;
    content:'';
    width:100%;
}
Estevan Maito
  • 1,482
  • 1
  • 19
  • 23
  • 1
    Actually, I meant *explicit* height, sorry for the poor choice of words, but my question has been answered in the comment below it. – mmgross Jan 23 '15 at 23:46
0

Your problem relates to display: inline-block on the :after pseudo element. Since it is an inline item, you also see some effects from white-space. If you change it to display: block, everything works as expected.

2C-B
  • 3,457
  • 1
  • 18
  • 22
  • 1
    `text-align:justify` obviously doesn't work on non-inline elements (I tried it anyway in case I was mistaken). So no, it doesn't work. – mmgross Jan 24 '15 at 00:38