无法覆盖text-align：使用text-align进行调整：保留在简单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.

Answer 1

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?

Answer 2

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> 

Answer 3

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.