Show & tell - The mighty hyphen

Hyphen

Hyphen

Minus

n dash

m dash

Hyphen

‑

Used to join words to indicate they have a combined meaning, to indicate the division of a word at the end of a line or to indicate a missing element.

Comes in two ‘flavours’ - Breaking and non-breaking

Hyphen-minus

-

Minus

− or −

Usually longer than a hyphen but shorter than an m dash.

A mathematical operator used to represent the notion of negative and subtraction.

mnn dash

– or –

Traditionally derived from the width of a lower-case n.

Indicates a closed range of values. Can also be used to contrast two values or illustrate a relationship between two things.

m dash

— or —

Traditionally derived from the height of a lower-case m. 1em wide, a length that varies with the size of the font.

Can be used in place of parentheses or a colon.

Usually shows an abrupt change in thought where a full stop is too strong and a comma to weak.

So — your point is?

Long titles + small screens. We’ve got a bit of a problem.

UnbreakableDefault — Do nothing at all. The word is larger than its containing area. The container is extended so the word can remain unbroken on a single line.

Unbreaka bleWord wrap — The ‘invisible’ hyphen.Word wrap breaks a word at the last character before the limit of its constraining area.

Unbreak- ableHard hyphens — An automatic line break after a hyphen Hyphenates the word after the last character before the limit of the constraining area.

Unbreakable

Font size change — Reduce the size of the font at smaller screen sizes This is useful but not as flexible as it could be. There is almost always a longer word out there. How small are you willing to go?

Nano-technology

That’s that sorted then. Of course not…

I’ll hyphenate anything including already hyphenated words like ‘nano-technology’

nano-tec- hnology

architec- ture

I don’t auto-hyphenate anything as I prefer to word break instead. I will word break on a soft-hyphen if one is present.

nano- technology

architec ture

I’ll hyphenate anything including already hyphenated words like ‘nano-technology’.

nano-tec- hnology

architec- ture

I’ll hyphenate anything but err towards breaking on soft hyphens if one is present.

nano-technology

architec- ture

// Type hyphenation @mixin type-hyphenation { overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }

We add this only for smaller device sizes. Otherwise things can go a bit nuts.