Consider a simple html element as
<div id="test">
a long text without line break
</div>
The browser will create lines based on the glyph and font sizes. After text arrangement by the browser (e.g. depending on the window width), how to get the lines of the text by JavaScript?
For example:
How to get the total number of lines
How to get the first line as appeared in the current window?
How to get the nth line?
No, there is no API that gives you access to the rendered text after layout has occurred. The only way to approximate this is pretty hacky, i.e. add words into a container one at a time and see when it changes height. See this related question:
detecting line-breaks with jQuery?
Yeah, who'd have thought it, even jQuery doesn't do this! ;-)
2 easy solutions and a extremely hard one.
1 Formatting the text.
Inside a pre & textContent
html
<pre>hello
hello1
hello2</pre>
js
document.getElementsByTagName('pre')[0].textContent.split('\n')
http://jsfiddle.net/gq9t3/1/
2 Adding br's
Inside a div with br & textContent
html
<div>hello<br>hello1<br>hello2<br>pizza</div>
js
document.getElementsByTagName('div')[0].innerHTML.split('<br>')
http://jsfiddle.net/gq9t3/4/
To much trouble
css
div{width:100px;line-height:20px;}
html
<div>hello dfgfhdhdgh fgdh fdghf gfdh fdgh hello1gfhd gh gh dfghd dfgh dhgf gf g dgh hello2</div>
js
document.getElementsByTagName('div')[0].offsetHeight/20
easy way to find the number of lines but you need to calculate the text width to find the corresponding line content.
http://jsfiddle.net/gq9t3/3/
I was attempting to style the first line of text, but text-transform:uppercase messed it up. http://zencode.in/lining.js/ helped with addressing the first line (responsively!), so perhaps this library will assist with your issue too.
Related
I wrote a very simple jquery plugin that clamps lines of an element to a set number of lines. Basically all it does is take the font size, the line height, and an argument passed to the function for max-lines, then it sets a maxheight and css-overflow to hidden.
To be clear, this clamps the actual element with the text, not a containing element.
I am wondering the best way to add an ellipsis to the last shown space. Should I actually truncate the text, then add an ellipsis via regex? If so, whats the best way to truncate characters that aren't shown?
Any help would be appreciated.
i have some div created with JS and mydiv.textContent="blahblahblahblahblahblah";
despite the fact mydiv have width set to 100px, string of text assigned to div keeps on going in one line and wont drop to other text. i am confused
In your css use
word-wrap: break-word;
If you want to make a string breakable into two lines and it contains no spaces, you need to insert suitable control characters or HTML tags that allow acceptable breaks, or maybe use automatic hyphenation. So this really depends on the kind of content you have; see my page on word breaks in HTML.
If the content is literally "blahblahblahblahblahblah" as a JavaScript string, make it "blah\xadblah\xadblah\xadblah\xadblah\xadblah". The notation \xad stands for U+00AD SOFT HYPHEN, which is treated as an invisible hyphenation hint.
I'm working on the latest version of my plugin, Textarea Line Counter (http://mostthingsweb.com/?p=84). To make it even more accurate, I want to identify regions of text that wrap because they are too large to fit on the line (like a sequence of repeated characters).
I'm assuming that browsers only wrap text at spaces. Are there any other characters that lines can be wrapped at? Thank you,
Looks like it depends on the browser, my Opera wraps also on e.g. + % ? $ / ( [ { } \ ° ! ¿
Safari/Chrome on ¿ ? too
(guess there are lots more)
Nice idea for a plugin. Fighting the accuracy issues is going to be a challenge.
There's not a universal catch all for the way textarea is going to handle a string (other than line breaks at spaces), or using word-wrap.
IE produced a break with . , () {} ?, but not with / * = +
In this example, textarea seems to have that "special" feeling like a td
Based on all your advice, I have created a solution. It is rather large, and in fact I think I will make it into a separate plugin, as well as including it in my Textarea Line Counter. It works like this:
Create a div to act as a container, and set the font to something monospaced (i.e. every character is the same width)
Create a span within the container, and place a single letter.
Take the width measurement of the span (which will be the width of the letter, once margins, padding, and some other CSS attributes are cloned)
Create another div within the container and clone its CSS attributes. Set it's width to be two times the width of the letter found in step 3, and record its height.
To test if a character will cause a wrap, set the text of the div to: A[some character]A. [some character] is a character you are trying to test.
Test the height of the div. If it is larger than the height found in step 4, the text has wrapped.
I'm looking forward to releasing this plugin. Thank you again for all your advice.
some browsers will break inside words if the word is longer than the col width,
otherwise they break on spaces.
I notice some browsers set this by default- you can, too in most bowsers with:
textarea{word-wrap: break-word}
you can be sure it is not set by using textarea{word-wrap: normal}
Sorry if this a simple, but I can't get it right. The problem is that what I have makes the text smaller from a point. What I mean is that if there is some aleady large text, Then it will make that text small again. I need to make text larger than it was before. The styles for the elements containing the text are set through CSS, so just editing the style property wouldn't work.
Thanks in advance! - Tanner
if your text element have some id than it can be done easily. For example:
<p id="hey">This is my fabulous text that will change.</p>
<a onMouseover=document.getElementById('hey').style.fontSize='10'> Make it Tiny!</a>
<a onMouseover=document.getElementById('hey').style.fontSize='24'> Make it HUGE!!!</a>
Actually document.getElementById('yourid').style.fontSize=yourvalue this is the general code. Use it where you want to increase the text size again by direct writing the code or by calling a function.
I display a bubble help for some short span elements. The bubbles are centered below that span and look great as long as the span isn't broken over two lines.
Looks good:
tell <span>irregular: told, told</span>
Looks bad:
tell <span>irregular: told,
told</span>
It looks bad, because the bubble isn't centered under the span anymore. Is there some way using JavaScript or jQuery to tell, if that span is broken over two lines?
9000's comment is correct. The trick is having access to a <span> that you know will be rendered on a single line. You can do that by wrapping the first word of your block in a span with a specific id, you could also use the last word or some other single word; there are cases where a single word will cross lines but the first word should be safe.
Once you have something that is only on one line you can compare its height to the height of the <span> that will get the tooltip. If the <span> that is getting the tooltip is taller than the single-line <span> then it has wrapped to multiple lines.
Try this jsfiddle:
http://jsfiddle.net/ambiguous/JbMhZ/1/
Adjust the size of the right panes until the red text wraps but the green text doesn't. Then hit Run in the toolbar at the top and it should say this at the bottom of the Result pane:
#has-break spans more than one line
#no-break spans only one line
I'm not exactly proud of this hack but it should work.
I'm left wondering if a better positioning algorithm for your tooltip would be a better idea. Maybe pull the mouse coordinates out of the hover event and use that to position the tooltip rather than positioning it based on the <span>.
I think the nicer way to do this would be with white-space: nowrap in CSS:
CSS:
span.bubble {
white-space: nowrap;
}
HTML:
tell <span class="bubble">irregular: told, told</span>
With or without a line break you can just calculate using .css() in jQuery where exactly on the screen is that span located and then position the tooltip accordingly. Or you can use a jQuery plugin to do all this for you.
Not quite sure what levels of help you're looking for, but \n is the identifier for linebreaks in JS