::first-line (:first-line)

This translation is incomplete. Please help translate this article from English.

Sumari

El pseudo-element CSS ::first-line aplica estils només per a la primera línia d'un element. La quantitat de text en la primera línia depèn de nombrosos factors, com l'amplada de l'element, l'amplada del document, i la mida de font del text. Com tots els pseudo-elements, ::first-line no coincideix amb cap element HTML real.

Una primera línia només té sentit en una caixa de bloc contenidor, per tant, el pseudo-element ::first-line té un efecte només en elements amb un valor display de block, inline-block, table-cell o table-caption . En tots els altres casos, ::first-line no té cap efecte.

Només un petit subconjunt de totes les propietats CSS es pot utilitzar dins d'un bloc de declaració d'un conjunt de regles CSS que conté un selector, usant el pseudo-element ::first-line:

Ja que aquesta llista s'ampliarà en el futur, es recomana que no s'utilitzi altres propietats dins del bloc de declaració, per tal de mantenir el CSS a prova de futur.

 

En CSS 2, els pseudo-elements van ser precedits d'un sol caràcter de dos punts. Com en les pseudo-classes també estaven seguint la mateixa convenció, eren indistingibles. Per solucionar això, CSS 2.1 va canviar la convenció dels pseudo-elements. Ara, un pseudo-element és precedit per dos caràcters de dos punts, i una pseudo-classe encara es prefixa amb un sol caràcter de dos punts.

Com diversos navegadors ja implementen la versió CSS 2 en una versió de llançament, tots els navegadors que suporten la sintaxi de dos punts també són compatibles amb l'antiga sintaxi d'un sol caràcter de dos punts.

Si els navegadors antics han de ser compatibles, :first-line és l'única opció viable; si no, es preferible, ::first-line.

Sintaxi

/* CSS3 syntax */
::first-line { style properties }

/* CSS2 syntax */
:first-line { style properties }

Exemples

text-transform

Canvia les lletres de la primera línia de cada paràgraf en majúscules.

Contingut HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore.</p>

Contingut CSS

p::first-line { text-transform: uppercase }

Sortida

margin-left

No fa res, margin-left no es pot aplicar a una pseudo-element ::first-line.

Contingut HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore.</p>

Contingut CSS

p::first-line { margin-left: 20px }

Sortida

text-indent

No fa res, text-indent no es pot aplicar a un pseudo-element ::first-line

Contingut HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore.</p>

Contingut CSS

p::first-line { text-indent: 20px }

Sortida

Especificacions

Especificació Estat Comentari
CSS Pseudo-Elements Level 4
The definition of '::first-line' in that specification.		 Working Draft Es defineix més estrictament on pot ocórrer.
Propietats generals permeses per la composició tipogràfica, decoració de text i propietats de disseny en línia, opacity
Definida l'herència de ::first-letter.
CSS Text Decoration Module Level 3
The definition of 'text-shadow with ::first-line' in that specification.		 Candidate Recommendation Permès lùs de text-shadow amb ::first-letter.
Selectors Level 3
The definition of '::first-line' in that specification.		 Recommendation La definició del que és la primera línia d'un element s'ha reformulat. S'ha introduït la sintaxi de dos punts per als pseudo-elements.
CSS Level 2 (Revision 1)
The definition of '::first-line' in that specification.		 Recommendation Sense canvis significatius, tot i que en CSS Nivell 2 se segueix utilitzant la sintaxi d'un sol caràcter de dos punts.
CSS Level 1
The definition of '::first-line' in that specification.		 Recommendation La definició inicial fa servir la sintaxi d'un sol caràcter de dos punts.

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suport bàsic 1.0 (buggy when using text-transform: issue 129669) 1.0 (1.7 or earlier) 9.0 7.0 1.0 (85) (buggy when using text-transform: issue 3409)
Antiga sintaxi d'un sol caràcter de dos punts (:first-line) 1.0 (buggy when using text-transform: issue 129669) 1.0 (1.7 or earlier) 5.5 3.5 1.0 (85) (buggy when using text-transform: issue 3409)
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suport bàsic ? 1.0 (1) No support ? ?
Antiga sintaxi d'un sol caràcter de dos punts (:first-line) ? 1.0 (1) ? ? ?

Veure

Document Tags and Contributors

Tags: 
 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,