In this article, you will learn about hyphenation. If this option is disabled, then all the words will start with a new line in case they do not fit in the previous one.
Table of contents
Auto hyphenation for mobile devices
Auto hyphenation for the desktop version
How does hyphenation work
Hyphenation rules depend on a language. HTML defines post's language via <lang> tag. Hyphenation works under 2 conditions:
1. if <lang> is included in a page code;
2. if there is a hyphenation dictionary available.
You can either set a language for the whole website via CMS or you can set it for each of your pages.
Automatic hyphenation for mobile devices
There is a CSS property hyphens: auto-added by default for all text elements created via Setka Editor. The property is applied to narrow screens and activates automatic hyphenation.
Automatic hyphenation for the desktop version
By default, automatic hyphenation is disabled for the desktop version. To enable it, you need to do the following:
1. Make sure there us a <lang> attribute with the needed language added to your page's template
2. Add the following code to your website's styles:
.stk-reset {hyphens: auto;}A detailed description of how to set automatic hyphenation in your CMS
Disabling automatic hyphenation
Sometimes automatic hyphenation does not fit your layout design. In such cases, it can be disabled.
In a specific post
In order to disable hyphenation in a specific post, you need to:
1. Open a Post tab in the editor
2. Expand it with the button ▼.
3. Add the following code in a Custom CSS field:
-webkit-hyphens: manual; hyphens: manual;
In all posts
In order to disable hyphenation in all posts, add the following code to a CSS field in your style in your Setka Account:
.stk-reset {
-webkit-hyphens: manual;
hyphens: manual;
}
Non-breaking space
A non-breaking space forces 2 words to remain in one line restricting them from hyphenation.
Use these keyboard combinations to apply non-breaking spaces in your text:
- Mac OS — ALT+SPACE
- Windows — CTRL+SHIFT+SPACE.
Note: you can opt for our inbuilt Enhance Symbols function to apply non-breaking spaces automatically.