Unable to override text-align: justify with text-align: left in simple HTML

Question

I have an odd issue with the text-align: left not working after the element has inherited a justify property. I even tried using the !important keyword and it's still not working. The odd thing is, if I use developer mode in Chrome, it says text-align: left is active, text-align: justify is inactive, but it is NOT rendering the left align.

Here is my code: https://jsfiddle.net/h0vx9sLc/3/ (updated Fiddle with "fix")

body { width: 100px; }
p:nth-child(1) {  }
p:nth-child(2) { text-align: justify; }
p>span { text-align: left !important; }

<p>
    <span>Testing Blah Blah Blah Blah Blah</span>
</p>
<p>
    <span>Testing Blah Blah Blah Blah Blah</span>
</p>

Based on the CSS priority there really is no chance the justify property has a higher priority than left. I tested this in Chrome, Firefox, and IE and all are doing the same thing.

Here is the screen shot of Chrome claiming the left property is active, but it isn't.

score 6 · Accepted Answer · edited May 23 '17 at 10:27

Ok, this is a VERY bizarre property of CSS.

I figured it out with the help of this question: text-align justify, cannot override

Apparently an inline element IGNORES text-align CSS, but it can INHERIT them. So my SPAN was inheriting the justify, but CSS rendering IGNORES the text-align CSS of an inline element.

To fix it, I add display: inline-block; to my span. Really, really bizarre. I'm not sure what to make of the Chrome developer issue. I guess it should technically be a bug?

zer00ne · Answer 2 · 2015-10-19T05:16:51.130

0

You can add a class to override the justify value or is there something I missed?

Update: <span>s are inline elements and text-align applies to blocks of text. So you have to apply display:block or inline-block on the <span>s or apply a class, an id, or an inline style to the <p>s.

body {
  width: 100px;
}
p~p {
  text-align: justify;
}
p>span {
  text-align: left !important;
}
.left {
  text-align: left !important;
}

<p class="left">
  <span>Testing Blah Blah Blah Blah Blah</span>
</p>
<p class="left">
  <span>Testing Blah Blah Blah Blah Blah</span>
</p>

edited Oct 19 '15 at 05:16

answered Oct 19 '15 at 03:58

zer00ne

41,936
6
41
68

Your class just overrides the p element's text-align, you are not really doing anything with the spans. If you set the spans to .left, it won't work. – Nelson Oct 19 '15 at 04:00

ALFmachine · Answer 3 · 2015-10-19T04:06:13.127

0

Your selector is throwing you off i think. The following from teachbrij.com explain well.

~ Sign:

It is general sibling combinator and similar to Adjacent sibling combinator. the difference is that the second selector does NOT have to immediately follow the first one means It will select all elements that is preceded by the former selector.

Here is the W3 rundown. Same info...

I have attached your updated fiddle in which I removed the the left justify. You will see that all of the multiple spans get thrown EXCEPT the first even though there is no

align: left

set.

Interesting question for sure. Hope this helps.

edited Oct 19 '15 at 04:06

answered Oct 19 '15 at 04:04

ALFmachine

639
7
12

I know what the p~p does. I want to show that without the justify, the first span behaves properly, but the second and onward span will suddenly be justified even though the span has a high priority `text-align: left` set. I have also answered my question :) – Nelson Oct 19 '15 at 04:06
Roger that you sure did! :) Very interesting stuff. As I was making Fiddle you answered. lol. Good one – ALFmachine Oct 19 '15 at 04:08
I get it now. Very weird how inline block is required. Some things are just that way. How come in JS {} + [] = 0 and [] + {} = [object object] Some things are just trip – ALFmachine Oct 19 '15 at 04:27

Unable to override text-align: justify with text-align: left in simple HTML

3 Answers3