search

cruftlab / tilfeldigeord.no

A new (again) minimal, static website for tilfeldigeord.no, built with Eleventy
https://tilfeldigeord.no
MIT License
1 stars 1 forks source link

Split word if too long #10

Open loket opened 4 years ago

loket commented 4 years ago

If two words are really long, they will overflow on the screen. It would be better if they would dynamically "split" and shown on the line below.

For instance: If the word "blemmegarnityr" is too long for the screen, it should be shown like this:

blemme-
garnityr

Splitting the content should be possible with display: inline-block, but I'm not sure if it's possible to transform the text (add the hyphen) easily.

loket commented 2 years ago

This technique might be useful: https://stackoverflow.com/a/37132903

loket commented 2 years ago

This actually looks very simple. It can be solved by adding a "soft hyphen" (a ­) in between words, and by setting hyphens: manual; in the CSS.

Right now, the combined word is actually an ordered list, but I assume it will need to be a header or something for this to work. But that's probably a good idea anyway.

Here's a demo of the hyphenation in action: https://jsitor.com/aZ-THYoih

Edit: Updated example with links. It works if ­ is part of the link - but it breaks capitalization in CSS. Fixed by using the :first-letter pseudo-element.