top of page

CSS

Properties

hyphens

​

Example:

​

.blah {

   hyphens: manual;

}

​

This can affect how text gets broken up for line-wrapping purposes. Sometimes hyphens are even involved! It determines how individual words are allowed to be hyphenated. I have found it necessary to test each browser to see how they are actually affected by changes to this property.

​

Possible Values:

​

none - Don't break up individual words (your "suggestions" are ignored, like what you are used to in life).

manual  - Don't break up individual words (except potentially where line wrapping is "suggested").

auto - Tells the browser to just do whatever it wants (when don't they?). Well, sort of... This tells the browser to try to break up words according to its' own idea of when and where that is a good idea. "Suggestions" are also honored.

​

"Suggested" mid-word line wrapping points

​

There are two characters to choose from that offer line wrap "suggestions". Even if hyphens is set such that "suggestions" are honored (manual or auto), they don't always cause line wrapping to occur. They only cause line wrapping to occur if that line has run out of space and would become overly wide without line wrapping. Here are your two options for this:

​

The good old hyphen: -

Yeah, that thing, you know, a hyphen. This is a visible character that serves a dual purpose, it is both a visible hyphen and a suggestion for a good line wrapping opportunity. They will still be visible even if line wrapping does not occur there.

​

shy (a "shy" or "soft" hyphen):

Supposedly, this is invisible. It suggests a good place to do line wrapping. But I wonder, would it display as a visible hyphen if line wrapping occurred there? The world may never know... Anyway, in HTML you can add these as ­

​

bottom of page