title: Is there any way to determine, with Javascript, or CSS which words are on what line in the client's browser?
body: <p>Say I have this HTML:</p>
  
  <pre><code>&lt;div&gt;
  &lt;p&gt;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.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to determine what line in the client's browser the phrase <code>sed do eiusmod tempor</code> is on and from there determine where that line starts and ends. Is there any way to do this with javascript.</p>
  
  <p>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 <code>&lt;div&gt;</code> is located in.).</p>
  
  <p>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.</p>
  
  <p>Also, if there is a way with CSS I would be even happier.</p>
  
  <p>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.
  <img src="https://i.stack.imgur.com/0Kvaz.png" alt="enter image description here"></p>