Как поставить div над определенной строкой ap?

Question

Как поставить div над определенной строкой ap?

0

У меня есть тег , полный текста. При отображении на страницу он отображается в 5 строках. Я хочу, чтобы стиль и расположение тега <div> выделил данную строку, не касаясь тега или его содержимого, предпочтительно используя jQuery.

Таким образом, разметка выглядит

<p>one fish two fish red fish zoo fish fifth fish</p>

И визуализируется выглядит как

одна рыба
две рыбы
Красная рыба
зоопарк
пятая рыба

И я хочу прозрачный красный div поверх линии ~~"красных рыб"~~ 3.

Я ничего не пробовал, и у меня все идеи.

В ответ на вопросы Мэтта Берланда: я должен создать функцию, которая, учитывая элемент P и номер строки, помещает цветную рамку над этой строкой в качестве рендеринга.

P может отображаться как любое количество строк.

Размер окна исправлен, поэтому мне не о чем беспокоиться.

Другие функции зависят от DOM страницы. Я могу вставить тег div, но не больше.

Matt 12 дек. 2013, в 22:53

Источник

0

Вы что-нибудь пробовали, но можете ли вы предоставить демоверсию jsfiddle?
Irvin Dominin 12 дек. 2013, в 21:13
0

В общем, это просто не та вещь, которую система рендеринга HTML / CSS позволяет легко делать.
Pointy 12 дек. 2013, в 21:13
2

Почему именно вы не хотите трогать  ? Обычный подход состоит в том, чтобы использовать неупорядоченный список и просто поместить фоновый цвет в элемент списка, чтобы выделить его.
Max Truxa 12 дек. 2013, в 21:13
10

I've tried nothing and I'm all out of ideas. - По крайней мере, вы честны.
Matt Burland 12 дек. 2013, в 21:14
1

@MattBurland .. Думал точно так же.
Kris Hollenbeck 12 дек. 2013, в 21:15
0

span не будет работать?
Robb 12 дек. 2013, в 21:15
0

Так каково ваше реальное требование здесь? Вы хотите разделить текст над red fish или хотите в третьей строке? Будет ли он всегда отображаться как пять строк? Что если кто-то изменит размер своего браузера? И каково ваше отвращение к «прикосновению к П»?
Matt Burland 12 дек. 2013, в 21:16
2

Одним из хороших предложений может быть размещение вопроса в StackOverflow, не делая ничего самостоятельно, и надеяться, что кто-то там сделает всю работу за вас. Как вы думаете?
Scott Sauyet 12 дек. 2013, в 21:17
6

Ваш вопрос / запрос в лучшем случае туманный. Это ужасно низкое качество, учитывая, что у вас 2K представителя
MonkeyZeus 12 дек. 2013, в 21:18
0

Может быть, он хочет значок «Давление сверстников»?
Itay Gal 12 дек. 2013, в 21:22
0

@MonkeyZeus Я знаю, верно? Новый пользователь будет немного более понятным; но 2к не совсем нуб.
patricksweeney 12 дек. 2013, в 21:23
1

Я не думаю, что было бы действительно справедливо критиковать его за то, что он не показал никакой работы. Когда SO наводнен вопросом «как мне AJAX», вопрос с бесчисленными учебниками, есть причина для раздражения. Тем не менее, некоторые новички могут потратить некоторое время на размышления над такой проблемой, не придумывая правильного решения, особенно если они менее опытны с CSS или стилем / позиционированием на основе JavaScript. Поиск учебника может быть неочевидным, если вы не знаете терминов или какие технологии вы бы использовали.
Katana314 12 дек. 2013, в 21:35
0

Отличная точка @ Katana314, вы должны указать на эту несправедливость на Meta.StackOverflow
MonkeyZeus 12 дек. 2013, в 22:11

Показать ещё 11 комментариев

Теги:

javascript

jquery

html

css

3 ответа

Ещё вопросы

Вы что-нибудь пробовали, но можете ли вы предоставить демоверсию jsfiddle?
В общем, это просто не та вещь, которую система рендеринга HTML / CSS позволяет легко делать.
Почему именно вы не хотите трогать  ? Обычный подход состоит в том, чтобы использовать неупорядоченный список и просто поместить фоновый цвет в элемент списка, чтобы выделить его.
I've tried nothing and I'm all out of ideas. - По крайней мере, вы честны.
Так каково ваше реальное требование здесь? Вы хотите разделить текст над red fish или хотите в третьей строке? Будет ли он всегда отображаться как пять строк? Что если кто-то изменит размер своего браузера? И каково ваше отвращение к «прикосновению к П»?
Одним из хороших предложений может быть размещение вопроса в StackOverflow, не делая ничего самостоятельно, и надеяться, что кто-то там сделает всю работу за вас. Как вы думаете?
Ваш вопрос / запрос в лучшем случае туманный. Это ужасно низкое качество, учитывая, что у вас 2K представителя
Может быть, он хочет значок «Давление сверстников»?
@MonkeyZeus Я знаю, верно? Новый пользователь будет немного более понятным; но 2к не совсем нуб.
Я не думаю, что было бы действительно справедливо критиковать его за то, что он не показал никакой работы. Когда SO наводнен вопросом «как мне AJAX», вопрос с бесчисленными учебниками, есть причина для раздражения. Тем не менее, некоторые новички могут потратить некоторое время на размышления над такой проблемой, не придумывая правильного решения, особенно если они менее опытны с CSS или стилем / позиционированием на основе JavaScript. Поиск учебника может быть неочевидным, если вы не знаете терминов или какие технологии вы бы использовали.
Отличная точка @ Katana314, вы должны указать на эту несправедливость на Meta.StackOverflow

kei · Answer 1 · 2013-12-12T19-35-00.000Z

DEMO

JS

$p = $('p').first();
$pHeight = $p.height()/5;
$pTop = $p.offset().top+(2*$pHeight);
$p.after('<div id="IvetriednothingandImalloutofideas" style="height:'+$pHeight+'px;top:'+$pTop+'px">');

CSS

p {
    outline:1px solid #ccc;
    width:60px; 
}

#IvetriednothingandImalloutofideas {
    background-color:rgba(255,0,0,0.2);
    width:60px;
    position:absolute;
}

Это похоже на то, что мне нужно, но есть ли способ определить количество строк, отображаемых p для части "/ 5"?

gagge · Answer 2 · 2013-12-12T20-25-00.000Z

Это действительно плохая идея сделать это так. Как сказал другой элемент списка, это правильный способ сделать это. Но если вам нужно сохранить P intact, вы можете установить высоту линии и сделать математику, чтобы поместить div, что бы вы ни хотели в качестве наложения.

CSS:

line-height: 22px;

JS:

var pHeight = $('p').height();
var lineHeight = parseInt($('p').css('line-height'));
var selectedLine = 3;
$('#overlay').css('top', -Math.abs(selectedLine * lineHeight));

Смотрите скрипку: http://jsfiddle.net/JVxdJ/

Я думаю, что-то неправильно отформатировано в вашем третьем предложении.
Да, редактор немного переформатировал мой текст. Спасибо!

Yuriy Galanter · Answer 3 · 2013-12-12T20-01-00.000Z

Если вы не хотите зависеть от форматирования (позиции строк могут меняться и т.д.), И вы не хотите изменять исходный , вы можете клонировать его - выделить требуемый текст и наложить клонированный на оригинал:

HTML

<p id="text">one fish two fish red fish zoo fish fifth fish</p>

CSS

#text {
    width:50px;
}

.highlight {
    background-color:red    
}

JS

var $text = $('#text');
var match = "red fish";

var $newtext = $text.clone().html($text.html().replace(match, '<span class="highlight">' + match + '</span>'))

$newtext.appendTo('body').offset($text.offset())

Демо: http://jsfiddle.net/j4UfM/1/

Вы можете удалить выделенную копию по мере необходимости.