3

Say I have this HTML:

<div>
<p>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.</p>
</div>

I want to determine what line in the client's browser the phrase sed do eiusmod tempor is on and from there determine where that line starts and ends. Is there any way to do this with javascript.

What I am trying to do with that line then is to put a border along the bottom and the sides (so a border on each side of that text that is parallel to the sides of the area that that <div> is located in.).

I know if there is a solution it won't be easy, but I am willing even if it is relatively difficult. Also, I am using jQuery if it has a method to do this.

Also, if there is a way with CSS I would be even happier.

Here is approximately talking about, the highlighted part is the text I am looking for and the red line is supposed to represent what has a border set on it. enter image description here

chromedude
  • 4,246
  • 16
  • 65
  • 96
  • so do you want to target the first instance of the text `sed do eiusmod tempor` and add a border to it? If so you could wrap that text in a `` and do the border with CSS. If not then I don't understand your question. A graphical representation would be helpful :) – Stuart Burrows Jun 11 '11 at 17:23
  • @Inrbob, yes I do want to target the first instance of the text, but I then want to figure out which line that text is on and add a border to that line. Sorry, I will try to get a graphical representation, I just don't have it working so not sure how to get it. The text is not a set text, sometimes it will be looking for other pieces and getting those pieces of text and their line. I am looking for a solution that will work with any window size. – chromedude Jun 11 '11 at 17:26
  • okay - so if there is text on a certain line you want to add a border to the entire line? What happens if the text is on multiple lines? – Stuart Burrows Jun 11 '11 at 17:28
  • I'm not sure what line number means in this context. – kinakuta Jun 11 '11 at 17:29
  • @Inrbob didn't think of that situation, I guess then, the border would extend over both lines (border-bottom-left-right on bottom line and border-left-right on top line of the two. – chromedude Jun 11 '11 at 17:32
  • @Inrbob just added a graphical representation, I hope that helps. – chromedude Jun 11 '11 at 17:34
  • Could you explain why you want to do this please? I can think of a potential solution but it's pretty dirty and might not be suitable – Stuart Burrows Jun 11 '11 at 17:37
  • 2
    @inrbob, ok I think I just found a solution here: http://stackoverflow.com/questions/1966441/how-to-select-nth-line-of-text-css-js , thanks anyway. – chromedude Jun 11 '11 at 17:39
  • okay cool - I was thinking of going down that route but wasn't sure how well it would perform. I didn't realise you needed it to adjust on resize. I mocked up an example of another route if you are interested: http://jsfiddle.net/y8quA/ – Stuart Burrows Jun 11 '11 at 18:04
  • @chromedude: See my answer. There's a way to do this with only CSS. – Eric Jun 11 '11 at 18:28

2 Answers2

3

If you wrap the desired words in a span, then you can apply the styles with CSS.

Here's a CSS only solution, using the ::before and ::after pseudo-elements. Hah!

Won't work for text spanning more than two lines though...

EDIT:

This one does though! Although the previous one will behave better in most cases.

Community
  • 1
  • 1
Eric
  • 95,302
  • 53
  • 242
  • 374
  • 1
    +1 for a clever answer! Both work for me (Chrome) on multiple lines. However this is not a CSS only solution as you will need to wrap the text in a span somehow. – Stuart Burrows Jun 11 '11 at 18:50
  • True, but I assumed it was a given that a section of text cannot be selected with CSS without the help of a ``. The [HTML5 `` element](http://html5doctor.com/draw-attention-with-mark/) might be more appropriate here. – Eric Jun 11 '11 at 19:00
0

It is not possible to determine the location of individual words within an element.

However, you could place sed do eiusmod tempor within a <span> element with a unique id, then you can retrieve the element and query its position.

Tony the Pony
  • 40,327
  • 71
  • 187
  • 281