Impossibile eseguire l'override di allineamento del testo: giustificare con allineamento del testo: a sinistra in HTML semplice

Question

Ho un problema strano con il text-align: left non funziona dopo che l'elemento ha ereditato una proprietà di giustificazione. Ho persino provato a utilizzare la parola chiave! Important e non funziona ancora. La cosa strana è che, se uso la modalità sviluppatore in Chrome, è che dicetext-align: left è attivo, text-align: justify è inattivo, ma NON sta rendendo l'allineamento a sinistra.

Ecco il mio codice: https://jsfiddle.net/h0vx9sLc/3/ (aggiornato Fiddle con "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>

in base alla priorità CSS c'è davvero alcuna possibilità alla proprietà justify ha una priorità più alta rispetto left . Ho provato questo in Chrome, Firefox e IE e tutti stanno facendo la stessa cosa.

Ecco la schermata di Chrome che afferma che la proprietà sinistra è attiva, ma non lo è.

Answer 1

Ok, questo è una proprietà molto bizzarra di CSS.

ho capito con l'aiuto di questa domanda: text-align justify, cannot override

Apparentemente un elemento in linea IGNORA text-align CSS, ma li può ereditare. Quindi il mio SPAN stava ereditando la giustificazione, ma il rendering CSS IGNORES il CSS di allineamento del testo di un elemento in linea.

Per risolvere il problema, aggiungere display: inline-block; alla mia span. Davvero, davvero bizzarro. Non so cosa fare del problema con gli sviluppatori di Chrome. Immagino che dovrebbe essere tecnicamente un bug?

Answer 2

È possibile aggiungere un class per sovrascrivere il valore justify o c'è qualcosa che ho perso?

Aggiornamento:<span> s sono elementi inline e text-align applica a blocchi di testo. Quindi, si deve applicare display:block o inline-block sulle <span> s o applicare un class, un id, o di uno stile in linea alle <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

vostro selettore sta gettando voi fuori credo. Il seguente da teachbrij.com spiega bene.

~ Segno:

E 'generale combinatore del fratello e simile a Adiacente combinatore del fratello. la differenza è che il secondo selettore NON deve seguire immediatamente il primo significa che selezionerà tutti gli elementi che sono preceduti dal precedente selettore.

Qui è il rundown W3.Stessa informazione ...

Ho allegato il vostro fiddle aggiornato in cui ho rimosso la giustificazione a sinistra. Vedrai che tutti gli span multipli vengono lanciati TRANNE il primo anche se non c'è

align: left 

set.

Interessante domanda di sicuro. Spero che questo ti aiuti.