Comment sélectionner la nième ligne de texte (CSS / JS)

Intéressant. Vous pouvez faire quelque chose comme ça avec JavaScript, bien sûr:

 $(function(){ var p = $('p'); var words = p.text().split(' '); var text = ''; $.each(words, function(i, w){ if($.trim(w)) text = text + '<span>' + w + '</span> ' } ); //each word p.html(text); $(window).resize(function(){ var line = 0; var prevTop = -15; $('span', p).each(function(){ var word = $(this); var top = word.offset().top; if(top!=prevTop){ prevTop=top; line++; } word.attr('class', 'line' + line); });//each });//resize $(window).resize(); //first one }); 

Fondamentalement, nous enveloppons chaque mot avec une portée et ajoutons une classe en fonction de la position de la portée, chaque fois que la fenêtre redimensionne. Je suis sûr que cela peut être fait plus efficacement, mais cela fonctionne comme une preuve de concept. Bien sûr, pour les lignes pair / impair, vous pouvez simplifier le code.

Cas Edge: je n'ai pas testé où la classe change la taille ou la largeur des mots. Il se peut qu'il soit très faux.

Ici, il est en action: http://jsbin.com/udehu3

Si chaque ligne est une <li> ou <p> séparée, vous pouvez la sélectionner en utilisant CSS.

: Nth-child (N)

Pris à partir de sitepoint.com , fonctionne dans Opera 9.5+, Safari 4+, FF3.5 +

La description

Cette pseudo-classe correspond aux éléments sur la base de leurs positions dans la liste des éléments enfants d'un parent. La pseudo-classe accepte un argument, N, qui peut être un mot-clé, un nombre ou une expression de numéro de la forme an + b. Pour plus d'informations, voir Compréhension :nth-child Expressions Pseudo-classe :nth-child .

Si N est un nombre ou une expression de nombre,: nth-child (N) correspond à des éléments précédés de N-1 frères et sœurs dans l'arbre de document.

Les sélecteurs d'exemple suivants sont équivalents et correspondent aux lignes de table impaires:

 tr:nth-child(2n+1) { ⋮ declarations } tr:nth-child(odd) { ⋮ declarations } 

Ce sélecteur d'exemple correspond aux trois premières lignes de n'importe quelle table:

 tr:nth-child(-n+3) { ⋮ declarations } 

Ce sélecteur d'exemple correspondra à tout paragraphe qui est le premier élément enfant de son élément parent:

 p:nth-child(1) { ⋮ declarations } 

Ceci est, bien sûr, équivalent au sélecteur p: premier enfant.

Exemple

Ce sélecteur d'exemple correspondra aux lignes de table impaires:

 tr:nth-child(odd) { ⋮ declarations } 

Vous pouvez également utiliser jQuery .

Si je vous comprends correctement, vous voulez pouvoir appliquer un style à une ligne spécifique dans le document, via CSS. Par exemple: pour rendre la 5ème ligne en gras.

Ceci n'est pas possible – CSS n'est pas orienté vers la ligne mais plutôt orienté vers les DOM. Pour atteindre votre objectif, vous devrez envelopper votre ligne dans un élément <span> (ou un <div>), puis appliquer le style à cet élément.

Le CSS n'est pas orienté vers la ligne car les numéros de ligne sont illusifs: les numéros de ligne varient en fonction de la résolution de l'écran, de la largeur de la fenêtre du navigateur, des polices par défaut définies sur le navigateur etc. Ainsi, le style basé sur les nombres de lignes vous donnera des résultats douteux .

MarcoFeaF en contraste MarcoAdMddMachelhadiceAddddddiceúdddddddiceAddddddiceúAAdddddiceúAAdddddiceúdddddiceúdiceAldidencedddMMagens Il permet la syntaxe CSS comme ceci:

 <style> .poem .line[first] { /* `.poem::first-line`*/ } .poem .line[last] { /* `.poem::last-line` */ } .poem .line[index="5"] { /* `.poem::nth-line(5)` */ } .poem .line:nth-of-type(-n+2) { /* `.poem::nth-line(-n+2)` */ } .poem .line:nth-last-of-type(2n) { /* `.poem:::nth-last-line(2n)` */ } </style> 

( Github )

L'approche de travail de Kobi (je ne peux pas commenter en raison de la faible réputation)

J'utilise les traits d'union: auto; Marco Marco illustr Chambe Da ChamonetAeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaea'eaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaeaea

Y'a t'il un moyen d'arranger cela? / Est-il possible de détecter les tirets automatiques?