How to apply line break hyphens to alphabet text in CSS, hyphens

If you want to display multiple lines of text on a webpage, line-breaking processing is needed. In this case, well-known CSS properties such as word-break and word-wrap are used. However, what if it is used with alphabet characters? You can use CSS to handle line breaks with hyphens.

# How to Handle Long Text Hyphenation using CSS, Hyphens

If the text is very long, line breaks are necessary. There are several different methods, and hyphenation is one of them. How can you hyphenate text? Before that, let's briefly look at the methods used for line breaks. First, please see below.

We compared the use of a relatively long phrase 'There is an international airport' without applying anything, using white-space, using word-break, and finally using hyphens.


The example at the bottom of the above is an example with the hyphens CSS attribute applied. As you can see, the dash symbol automatically appears when the text is wrapped!

Now let's learn how to apply hyphens below. First, it's a simple syntax.

hyphens: auto | manul | none;

Each setting value is used as follows.

manual // (Default) apply when used ‐ or ­
auto // Hyphenation is automatically applied according to the language value.
none // I do not use hyphens.

Then let's create a simple example code. The following code is the applied HTML and CSS above, so let's first examine the HTML code.

In the above example, we applied hyphens by specifying the class "hyphens". Also, the parent div tag has a lang attribute. In order to apply hyphens, the lang attribute must be specified. If it is not present, hyphens will not be applied, so it must be used together.

"To apply hyphenation, use the lang attribute.!"

Now, let's take a look at the CSS code.

When applying hyphens, it is recommended to use both -ms- and -webkit- for browser compatibility as shown above. So far, we have learned briefly about applying hyphens using CSS. Note that the hyphen CSS is widely used in most browsers, so keep this in mind.