Как выбрать энную строку текста (CSS/JS)
Как выбрать и применить стиль на определенную строку текста? Как псевдоэлемент CSS: первая строка, но я хочу выбрать любую строку, не ограниченную первым.
Кажется, что это не может быть сделано только при помощи CSS... Так или иначе я не возражаю против решения JS.
Обновление:
Ну, на самом деле это только для интереса. Я пытаюсь достигнуть чего-то как выделение каждой ровной строки абзаца (для удобочитаемости, как то, что все делают для строк таблицы)...
Предварительное форматирование текста как:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
... для меня, но хорошо, как знать, где разделить? Даже если ширина абзаца дана, все еще трудно определить...
3 ответа
Интересно. Конечно, с помощью JavaScript можно сделать что-то подобное:
$(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
});
В принципе, мы обертываем каждое слово пролетом, и добавляем класс, основанный на положении пролета, всякий раз, когда окно изменяет размер. Я уверен, что это можно сделать более эффективно, но это работает как доказательство концепции. Конечно, для четных/дополнительных строк можно упростить код.
Edge cases: Я не проверял, где класс изменяет размер или ширину слов. Это может закончиться очень неправильно.
Вот он в действии: http://jsbin.com/udehu3
Если я правильно вас понимаю, вы хотите иметь возможность применить стиль к определенной строке в документе, через CSS. Например: сделать 5-ю строку жирной.
Это невозможно - CSS не ориентирован на линию, а на DOM-элемент. Поэтому для достижения своей цели вам нужно будет обернуть вашу линию внутри элемента (или CSS не является линейно-ориентированным, потому что номера строк иллюзорны: номера строк будут меняться в зависимости от разрешения экрана, ширины окна браузера, шрифтов по умолчанию, определенных в браузере и т.д. Таким образом, стиль, основанный на номерах линий, даст вам сомнительные результаты.
Если каждая строка является отдельной или , вы можете выбрать это, используя CSS.
:nth-child(N)
Taken from sitepoint. com, работает в Opera 9.5+, Safari 4+, FF3.5+
Description
Этот псевдо-класс соответствует элементам по их положению в списке дочерних элементов родительского элемента. Псевдо-класс принимает аргумент N, который может быть ключевым словом, числом или числовым выражением формы a+b. Подробнее см. раздел Понимание выражений псевдо-класса :nth-child.
Если N - это числовое или числовое выражение, то :nth-child(N) совпадает с элементами, которым в дереве документов предшествуют N-1 родные братья и сёстры.
Следующие примеры селекторов эквивалентны и будут соответствовать нечетным строкам таблицы:
tr:nth-child(2n+1) {
⋮ declarations
}
tr:nth-child(odd) {
⋮ declarations
}
Этот пример селектора будет соответствовать первым трем строкам любой таблицы:
tr:nth-child(-n+3) {
⋮ declarations
}
Этот пример селектора будет соответствовать любому абзацу, который является первым дочерним элементом его родительского элемента:
p:nth-child(1) {
⋮ declarations
}
Это, конечно, эквивалентно селектору p:first-child.
Пример
Этот пример селектора будет соответствовать нечетным строкам таблицы:
tr:nth-child(odd) {
⋮ declarations
}
Можно также использовать jQuery.