Trending September 2023 # How Hyphens Property Works In Css With Examples # Suggested October 2023 # Top 17 Popular

You are reading the article How Hyphens Property Works In Css With Examples updated in September 2023 on the website Dacvumuahe.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested October 2023 How Hyphens Property Works In Css With Examples

Introduction to CSS Hyphens

During coding pages in HTML with the help of styling and alignments using CSS, you might want to wrap the word of some or all of the text inside a border of the page as per requirement. CSS Hyphens property helps to get the limit of wrap up of text which is applied in words of the text in hyphen component of the CSS by utilizing different values of the parameters to achieve a better design of your HTML user interface, which is as per your desired design in your project resulting into an increase of more traffic engagement of your webpage. Here we will see the procedure you can use to wrap up the text inside an area of an HTML page by putting CSS Hyphens property within words of the text with several examples.

Start Your Free Software Development Course

Syntax and Parameters of CSS Hyphens

Given below are the syntax and parameters mentioned :

Parameters

Now you may ask, which are the parameters for the property in CSS hyphens? Those are various types of values of hyphens that indicate the wrap-up of the text inside an area or border.

For this, you can refer to the below table with descriptions where the values of parameters are detailed.

Value Description

none As the name suggests, in this case, no word is present with hyphens in the text. Hence words will flow over the area or border. This is not the desired case, although. Because words will flow out from its border, this will eventually result in a bad design and look of your webpage, which does not indicate good user traffic. Unless required specifically, you should avoid this and put proper hyphenation values in the CSS section of your HTML code.

manual The default value of the hyphen property of CSS is manual. When the property of hyphenation is manual, the user must manually provide the hyphens in the required areas inside the word so that you will get a wrap-up output as per the requirements. But in this case, every time you need to run your code and check out for required cases, and put the hyphenation. Bit tiresome work.

auto No manual intervention is necessary. When the property of hyphenation is auto, the hyphen is automatically inserted in the required areas inside the word so that you will get wrapped up in the text as needed.

initial This value puts the hyphen property, which is its default one.

inherit The child element automatically gets the parent element property.

How does Hyphens Property work in CSS?

It would be best if you used desired values of the parameters of the hyphen property utilizing the basic syntax of CSS in HTML so that the required wrap-up of text with proper hyphens in output is generated.

You can go through the examples to get an idea of how you can put proper hyphenations to wrap up the text inside the border by using different values of hyphens properties in CSS.

Examples of CSS Hyphens

Given below are the examples mentioned :

Example #1

Code:

body { text-align: left; } div { width: 48px; border: 3px solid green; background-color: yellow; } div.n { hyphens: none; } div.m { hyphens: manual; } div.a { hyphens: auto; } This sentence does not have hyphenated word This sentenc-e has hyphen-ated word This value puts hyphen automa-tically

Example #2

In the second case, you will see another illustration of the hyphenation property of CSS.

Code:

body { text-align: left; } div { width: 42px; border: 2px solid black; background-color: aqua; } div.nne { hyphens: none; } div.manl { hyphens: manual; } div.ato { hyphens: auto; }

Output:

Example #3

Code:

body { text-align: left; } div { width: 33px; border: 3px solid indigo; background-color: white; } div.ato { hyphens: auto; } div.nne { hyphens: none; } div.manl { hyphens: manual; }

Output:

Conclusion

We are concluding on the “CSS Hyphens property” here. In this article, we have illustrated some examples of how you can use the values of hyphens property in the code of the HTML page with the use of the CSS section. This article will be handy for those involved in developing and designing the front end with HTML and CSS.