Databases
StackOverflow2013
Postsdbo
POGet specific textline in div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGet specific textline in div
    text
    copied!<p>currently i am trying to work with text displayed in cols on a webpage. In fact i am trying to simulate <code>CSS3 Multiple Columns</code>.</p> <p>I start with one column that contains all the text, use <code>Hyphenator.js</code> to improve the text quality and after that i want to split at the first invisible line and add the text to a new floating div. I want to do this until i have no undisplayed text left. </p> <p>The problem i am facing is, that the layout is fluid and i have no idea, how i can get a specific line of the text.</p> <p>I started by extracting the css attribute <code>line-height</code>, the <code>height</code> of the parent div that uses <code>overflow: hidden;</code> to hide longer text and the <code>height</code> of the text-div. But now i am stuck, because i know no way to determine how many words are on one line. </p> <p>I tried also to use regexp to split the text in sentences. And add one after another until the height of the div is to big for the surrounding one. But with this i don't have the benefit of <code>Hyphenator.js</code>.</p> <p>This is an excerpt from my html: </p> <pre><code>&lt;div class="col col_2"&gt; &lt;div class="col_content"&gt; &lt;h1&gt;Lorem Ipsum dolor sit amet&lt;/h1&gt; &lt;div class="text"&gt; &lt;div class="start_col hyphenate"&gt; Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>The <code>start_col</code> will be hidden after the process is done, to use the original text if the user resizes the window.</p> <p>This is the regexp i use to split the text into sentences:</p> <pre><code>var sentences = $(this).text().replace(/\.+/g,'.|').replace(/\?/g,'?|').replace(/\!/g,'!|').split("|"); var temp = []; for(var i = 0; i &lt; sentences.length; i++) { var sentence = $.trim(sentences[i]); if(sentence !== "") temp.push(sentence); sentences = temp; } </code></pre> <p>But like i wrote before, with this i cannot benefit from <code>Hyphenator.js</code>.</p> <p>I will be happy explaining more if i was unclear in some point.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload