# Hyphenation

## What is 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.

## How does hyphenation work <a href="#h_cd4f8bb4-b327-4537-ad72-001f2b554b87" id="h_cd4f8bb4-b327-4537-ad72-001f2b554b87"></a>

Hyphenation rules depend on a language. HTML defines the post's language via a tag. Hyphenation works under 2 conditions:

1\. if is included in a page code.

2\. if there is a hyphenation dictionary available.&#x20;

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.&#x20;

### Automatic hyphenation for the desktop version <a href="#h_a6c314cf-9a3c-468a-ba59-0da77f6cb60b" id="h_a6c314cf-9a3c-468a-ba59-0da77f6cb60b"></a>

By default, automatic hyphenation is disabled for the desktop version. To enable it, you need to do the following:&#x20;

1\. Make sure there us an attribute with the needed language added to your page's template

2\. Add the following code to your website's styles:

```css
.stk-reset {hyphens: auto;}
```

Read a more detailed description of how to set automatic hyphenation in your CMS [in this article](https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens). &#x20;

## Disabling automatic hyphenation <a href="#h_44c89eca-5eb4-4908-890b-6dac959f1131" id="h_44c89eca-5eb4-4908-890b-6dac959f1131"></a>

Sometimes automatic hyphenation does not fit your layout design. In such cases, it can be disabled.&#x20;

### In a specific post <a href="#h_834887e0-e304-4668-8af5-e21cad3ef484" id="h_834887e0-e304-4668-8af5-e21cad3ef484"></a>

In order to disable hyphenation in a specific post, you need to:

1\. Open a **Post** tab in the editor (in the Upper Toolbar).

2\. Expand it with the **▼** button.

3\. Add the following code in a **Custom CSS** field:

```css
-webkit-hyphens: manual; hyphens: manual;
```

[Learn more about using Custom CSS in Setka Editor. ](https://setka.gitbook.io/help-center/setka-post-editor/custom-css)

### In all posts <a href="#h_8aa8d276-2ff1-462a-b224-30692a8a950c" id="h_8aa8d276-2ff1-462a-b224-30692a8a950c"></a>

In order to disable hyphenation in all posts, add the following code to a CSS field in your style in your [Content Design System Manager:](https://setka.gitbook.io/help-center/content-design-system-manager)

```css
.stk-reset {
  -webkit-hyphens: manual;
  hyphens: manual;
}
```

## Non-breaking space <a href="#h_aa020272-c904-45dd-8ab7-b7845f8b12aa" id="h_aa020272-c904-45dd-8ab7-b7845f8b12aa"></a>

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.

{% hint style="success" %}
**Please note:** you can opt for our inbuilt [Enhance Symbols](https://setka.gitbook.io/help-center/setka-post-editor/enhace-symbols) function to apply non-breaking spaces automatically.
{% endhint %}