Comment sélectionner la nième ligne de texte (CSS / JS)
Comment choisir et appliquer un style sur une ligne spécifique du texte?
Comme le CSS pseudo-élément :first-line, mais je veux sélectionner toute la ligne, non limité à la première.
Il semble qu'il ne peut pas être fait en utilisant uniquement CSS... de toute façon je n'ai pas l'esprit d'un JS solution.
Mise à jour:
Bien, en fait, c'est uniquement par intérêt. Je suis en train de réaliser quelque chose comme mettant en évidence chaque ligne d'un paragraphe (pour des raisons de lisibilité, à l'instar de ce que tout le monde le fait pour les lignes de la table)...
Pré-formatage du texte comme:
<p>
<span class='line1'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do </span>
<span class='line2'>eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad </span>
<span class='line3'>minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip </span>
<span class='line4'>ex ea commodo consequat. Duis aute irure dolor in reprehenderit in </span>
<span class='line5'>voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur </span>
<span class='line6'>sint occaecat cupidatat non proident, sunt in culpa qui officia </span>
<span class='line7'>deserunt mollit anim id est laborum.</span>
</p>
...c'est ok pour moi, mais comment savoir où couper? Même si la largeur de point est donné, il est encore difficile à déterminer...
source d'informationauteur Andy Li
Vous devez vous connecter pour publier un commentaire.
Intéressant. Vous pouvez faire quelque chose comme ça avec JavaScript, bien sûr:
Fondamentalement, nous envelopper chaque mot avec une plage, et ajouter une classe basée sur la position de l'échelle de mesure, chaque fois que la fenêtre est redimensionnée. Je suis sûr qu'il peut être fait de manière plus efficace, mais il fonctionne comme une preuve de concept. Bien sûr, pour les paires/impaires lignes, vous pouvez simplifier le code.
Cas de bord: je n'ai pas le tester où les changements de classe de la taille ou la largeur de la mots. Il peut finir très mal.
Ici, il est en action: http://jsbin.com/udehu3
Si chaque ligne est séparée
<li>
ou<p>
vous pouvez sélectionner, à l'aide de CSS.:nth-child(N)
Prises de sitepoint.comtravaille en dans Opera 9.5+, Safari 4+, FF3.5+
Description
Cette pseudo-classe correspond à des éléments sur la base de leurs positions au sein d'un parent de l'élément de la liste des éléments enfants. La pseudo-classe accepte un argument, N, qui peut être un mot clé, un nombre ou un nombre expression de la forme an+b. Pour plus d'informations, voir présentation de la
:nth-child
Pseudo-classe, les Expressions.Si N est un nombre ou un nombre d'expression, :nth-child(N) correspond à des éléments qui sont précédées par N-1 des frères et sœurs dans l'arborescence du document.
L'exemple suivant sélecteurs sont équivalentes, et correspondent à impaires lignes de la table:
Cet exemple sélecteur de match les trois premières lignes de la table:
Cet exemple sélecteur correspond à tout point qui est le premier élément enfant de son élément parent:
C'est, bien sûr, l'équivalent du sélecteur p:first-child.
Exemple
Cet exemple sélecteur match impaires lignes de la table:
Vous pouvez également utiliser jQuery.
Si je vous comprends bien, vous voulez être en mesure d'appliquer un style à une ligne spécifique dans le document, via CSS. Par exemple: faire de la 5ème ligne en gras.
Ce n'est pas possible - CSS n'est pas en ligne orienté, mais plutôt dans les DOM-élément orienté. Afin d'atteindre votre objectif, vous aurez pour envelopper votre ligne à l'intérieur d'un <span> (ou <div>) élément et ensuite appliquer le style à cet élément.
CSS n'est pas en ligne orienté parce que les numéros de ligne sont illusoires: les numéros de ligne va changer en fonction de la résolution de l'écran, la largeur de la fenêtre du navigateur, les polices par défaut définie dans le navigateur, etc. Ainsi, le style qui est basé sur les numéros de ligne vous donnera des résultats discutables.
J'ai trouvé une bibliothèque JavaScript appelé lining.js pour vous aider avec ceci si quelqu'un est intéressé. Il permet à la syntaxe CSS comme ceci:
(Github)