My client has requested to enable auto-hyphenation on this page: http://carlosdinizart.com/biography/ , and I realized I've never actually seen it done on a web-page.
Is it possible to set up auto-hyphenation in an HTML document with just HTML/CSS? If not - what are the options?
In HTML, use ­ to insert a soft hyphen.
hyphens: manual Words are only broken at line breaks where there are characters inside the word that suggest line break opportunities. There are two characters that suggest line break opportunity: U+2010 (HYPHEN): the “hard” hyphen character indicates a visible line break opportunity.
In Windows, use ALT + 0151. To use an em dash on a web page, create it in HTML with "—" or "—." You can also use the Unicode numeric entity of U+2014.
You can also insert a non‑breaking hyphen for, say, a phone number: 555‑555‑5555. There's not a standard keyboard combination to enter it, but you can use the html code: ‑ . Or you can copy and paste it from above.
CSS3 provides some support for this. Source: http://drublic.de/blog/css3-auto-hyphenation-for-text-elements/ You can check the w3c documentation here: http://www.w3.org/TR/2011/WD-css3-text-20110901/#hyphenation
CSS3 adds six properties to the list of useful thing. These are:
hyphens
.hyphenate-resource
so the browser has a better chance to render your text with the right hyphenation.hyphenate-before
sets a minimum number of characters before the hyphenation.hyphenate-after
does the same as hyphenate-before
but for characters after the hyphenation.hyphenate-lines
defines about how many lines a hyphenated word is written at a maximum. with hyphenate-character
you can specify which HTML-entity should be used, e.g. \2010
.The main property of this stack is hyphens
. It accepts one of three values: none
, manual
or auto
. The default one is manual, where you can set hyphens via ­
. auto
it the better one for continuous text while words get split if possible and available. And none
does not hyphenate at all even if there is a character set for a possible line break in a certain word.
Update:
Browser support information here: http://caniuse.com/css-hyphens
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With