Unable to override text alignment: text alignment: left in plain HTML

Question

I have an odd problem when text-align: left does not work after the element has inherited the justify property. I even tried to use a keyword! Important, and it still does not work. Strange, if I use the developer mode in Chrome, it says that text-align: left active, text-align: justify is inactive, but DOES NOT left text-align: justify .

Here is my code: https://jsfiddle.net/h0vx9sLc/3/ (updated by Fiddle using "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 CSS priority, there really is no chance that the justify property has higher priority than left . I tested this in Chrome, Firefox, and IE, and they all do the same.

Here is a screenshot from Chrome that claims that the left property is active, but it isn’t.

Answer 1

Ok, this is a VERY weird CSS property.

I figured this out with this question: text alignment alignment cannot override

Apparently the built-in element is IGNORES text-align CSS, but it can INHERIT them. So my SPAN inherited an excuse, but the IGNORES CSS rendering aligns the CSS text of the inline element.

To fix this, I add display: inline-block; to your range. Really, really weird. I'm not sure what to do with the Chrome developer problem. Think this technically would be a mistake?

Answer 2

Can you add a class to override the justify value, or is there something I missed?

Update: <span> are inline elements, and text-align is applied to blocks of text. So you have to apply display: block or inline- block in <span> or apply class , id or inline style for <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 discards you, I think. From learnbrij.com are explained well.

~ Sign:

This is a common sibling combinator and a similar combinator combinator. the difference is that the second selector should NOT immediately follow the first, this means that it will select all the elements that are preceded by the previous selector.

Here is the W3 rundown. The same information ...

I attached your updated fiddle , in which I removed the left alignment. You will see that all multiple gaps will be thrown except for the EXCEPTION of the first, even if not

 align: left 

a bunch of.

An interesting question for sure. Hope this helps.