Event when wordwrapping

Question

When doing websites for both pc and mobile, responsive design, the line widths and fontsizes often can vary wildly. Especially headings can wrap on inappr-opriat-e places, if the content creator is not aware of the problem.

Is there a way of letting a crawler scan the site for browser-forced wordwraps, or having a javascript event fire on wordwrapping?

If I know the problem I know how to put ­ in, but I don't want to have to put them into every word every where, just when needed.

---

Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu is a hill on New Zealand's North Island.

---

is a valid example

Answer 1

While not a JavaScript solution, the CSS hyphens property can handle automatic hyphenation for you, acting as if you had inserted ­ hyphen markers throughout the document.

.hyphens {
    hyphens: auto;
}

Proper hyphenation points are determined according to the language set in the document or the element.

<p lang='en' class='hyphens'>Content containing extremely long words</p>

Unfortunately, the hyphens property isn't fully supported by Chrome (see caniuse) but maybe this will someday change. Other major browsers all support the feature at this time.

A library called Hyphenator exists and offers support for automatic hyphenation for browsers that otherwise don't support hyphens: auto or lack specific language hyphenation patterns.