Develop Reference

hyphenate only when the word is too long for one whole sentence

There are already many questions about hyphenating words, but I couldn't find a question about hyphenate only when one word that is by it's own too long for one whole sentence.
example:
I like this to be intact (not trying to put the word "verlichtingssysteem" in the upper line with hyphenates)
So I don't want this:
But I want to have a word that doesn't fit the whole line/div/page is hyphenated. Otherwise I can't see the text in full as you can see below. (it cuts off the last 3 characters)
All the solutions I have seen before on other questions does hyphenate on both last 2 examples instead of only the last example.
So it needs only to hyphenate when a word by it's own width doesn't fit the whole div/page, so when you have two words it just needs to place the word on the next line instead of hyphenating.
I only have this word fall off screen problem on mobile. But an (soft) hyphenate messes up on other devices that have a bigger width as you can see on picture 2. So I only need it for one word that by it's own to big on one line.
I don't think I am the only one who has this desire?

you can use ­
It only breaks a word when it would overlap the content width.
use it like this­text­is­getting­long = this­text­is­getting­long
see this fiddle: http://jsfiddle.net/2r70mhnw/1/
you probably have to set the width of the container to 100%, that's all!
http://en.wikipedia.org/wiki/Soft_hyphen
In computing and typesetting, a soft hyphen (ISO 8859: 0xAD, Unicode U+00AD soft hyphen, HTML: ­ ­) or syllable hyphen (EBCDIC: 0xCA), abbreviated SHY, is a code point reserved in some coded character sets for the purpose of breaking words across lines by inserting visible hyphens.

In some cases using
/* using those two for compatibility reasons with old browsers */
overflow-wrap: break-word;
word-wrap: break-word;
could be a valid solution. Beside its probably not a good solution for text content, I found it really useful to use e.g. in navigations or titles.
It breaks only single words if this particular word does not fit into the line. While it does not add "-" and does no real hyphenation, though.

How to get nth line of a text by JavaScript?

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.

"Splitting" long words

I'm making a responsive website for a client using twitter bootstrap, which is responsive by default. However when the words get too long in a <h1> it doesn't fit the mobile sized browser.
What I would like to do is change "thisisaverylongword" into "thisisa-verylongword" with the final part on a new line.
Is there a simple way to do this, maybe with javascript? I'm thinking some condition like "if $word is wider than $body then" or something similar. Any tips will be very useful, gold star if the same code works for any word.

You could use the (experimental) CSS property hyphens:
h1 {
-webkit-hyphens: manual;
-moz-hyphens: manual;
-ms-hyphens: manual;
hyphens: manual;
}
and specify the line break by using special unicode characters:
U+2010 (HYPHEN)
The "hard" hyphen character indicates a visible line break opportunity. Even if the line is not actually broken at that point, the hyphen is still rendered.
U+00AD (SHY)
An invisible, "soft" hyphen. This character is not rendered visibly; instead, it suggests a place where the browser might choose to break the word if necessary. In HTML, you can use ­ to insert a soft hyphen.
Browser compatibilty
MDN reference
EDIT
As mentioned by #hustlerinc it might be needed to set word-break: break-all to make it work.

I've written a jQuery plugin that might fit this purpose quite well. Check out ellipsis.js. Using the following configuration should work:
$('h1').ellipsis({visible: 10, more: '…', separator: '', atFront: false})
I guess the advantage of doing it this way is that the users still may display the whole header on tap if they want to.
You can apparently achieve something like this with a bit of CSS, check out the text-overflow property. Perhaps that's the ticket for this case. No JS needed. :)

Can't you set the CSS property word-break to hyphenate?
example here

I think that you must do it by yourself.
With the function "split", you split your string into a table of words. Then, you can check all the words into a for.

Truncating text inside a div [duplicate]

This question already has answers here:
Truncating long strings with CSS: feasible yet?
(6 answers)
Closed 9 years ago.
I have some dynamic text (comes from a database) and I need to fit into a div
My div has a fixed size. However, when the text becomes too long, it breaks into two lines. I would like to put three dots at the end of longer texts to make them fit inside a single line.
For example: My really long text becomes My really lo...
I have committed several attempts, but basically all of them depend on counting characters. That is, whatsoever, not really fortunate, for characters do not have a fixed width. For example, a capital W is much wider than an small i
Therefore, I encounter two main problems with the character-counting approach:
If the text has many narrow characters, it gets cut and appended with ..., even if the text would actually fit on one line afore trimmed.
When the text contains many wide characters, it ends up on two lines even after I cut it to the maximum number of characters and append the dots.
Is there any solution here (JavaScript or CSS) that takes the actual width of the text into consideration, and not the number of characters?

Use these styles:
white-space: nowrap; /*keep text on one line */
overflow: hidden; /*prevent text from being shown outside the border */
text-overflow: ellipsis; /*cut off text with an ellipsis*/

Apart from ellipsis, I would suggest display the whole text on mouse hover using tooltip.
fiddle

I would suggest Trunk8
You can then make any text fit to the size of the div, it trims the text that would cause it to go beyond 1 line (options are available to set amount of lines allowed)
E.g
$('.truncate').trunk8();

You should look at css ellipsis : http://www.w3schools.com/cssref/css3_pr_text-overflow.asp

What characters will a TextArea wrap at, other than spaces?

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}