Introduction to CSS Hyphens
While coding of 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.
Syntax and Parameters of CSS Hyphens
Given below is the syntax and parameters mentioned :
hyphens: none|manual|auto|initial|inherit;Parameters
Now you may ask which are the parameters for the property in CSS hyphens? Actually, 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 the below table with descriptions where the values of parameters are detailed.
| Value | Description |
| none | As the name clearly suggest, in this case, in the text no word is present with hyphens. Hence words will flow over the area or border. This is not the desired case although. Simply because words will flow out from its border. This will eventually result into the 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 | Default value of hyphen property of CSS is manual. When the property of hyphenation is manual, user need to manually provide the hyphens in required areas inside the word so that you will get 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, automatically the hyphen is inserted in required areas inside the word so that you will get wrapped up text as per the need. |
| initial | This value puts the hyphen property which is its default one. |
| inherit | Child element automatically gets parent element property. |
How does Hyphens Property work in CSS?
- You must use desired values of the parameters of hyphen property utilizing 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 how you will be able to put proper hyphenations to wrap up the text inside border by the use of different values of hyphens properties in CSS.
- Also check out the comment section of the code examples to know where and how those values to be put to get proper wrap up and hyphenations.
Examples of CSS Hyphens
Given below are the examples mentioned :
Example #1
In the first example we will go through the illustration of the hyphenation property CSS. When the value of hyphenation is manual, you need to explicitly put the hyphens in required places inside the text so that at the output you will get desired wrap up. In case of auto, algorithm automatically puts to get wrap up. Check inline comments in code.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: left;
}
div {
width: 48px;
border: 3px solid green;
background-color: yellow; // color of background
}
//defining different values of hyphens
div.n {
hyphens: none;
}
div.m {
hyphens: manual;
}
div.a {
hyphens: auto;
}
</style>
</head>
<body>
<h2>Demonstration of CSS hyphens Property</h2>
<h3>hyphens value is none</h3>
<p>hyphen is not present there</p>
<div class="n">
This sentence does not have hyphenated word
</div>
<h3>hyphens value is manual</h3>
<p>Hyphens will be there only if it is required.</p>
<div class="m">
This sentenc-e has hyphen-ated word
</div>
<h3>hyphens value is auto</h3>
<p>Hyphens will be there automatcially only if it is required.</p>
<div class="a">
This value puts hyphen automa-tically
</div>
</body>
</html>Output:
Example #2
In the second case, you will see another illustration of hyphenation property of CSS.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<h2>Illustration of The hyphens Property of CSS</h2>
<h3>value of hyphens property is none</h3>
<div class="nne">hyphen does not exist there</div>
<h3>value of hyphens property is manual</h3>
<div class="manl">hyphe-n needs to be put manua-lly when requir-ed</div>
<h3>value of hyphens property is auto</h3>
<div class="ato">hyphe-n will be put autom-aticall-y when requir-ed</div>
</body>
</html>Output:
Example #3
In this example, you will go through another illustration of hyphen property. In this case, you will see how to put hyphenation value to get proper wrap-up text.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<h2>Example of The hyphens Property of CSS</h2>
<h3>auto hyphens property </h3>
<div class="ato">hyph-en will be inserted in text auto-matically when it is desir-ed</div>
<h3>none hyphens property </h3>
<div class="nne">hyphen will not present in the text</div>
<h3>manual hyphens property is manual</h3>
<div class="manl">hyph-en is requi-red to put in text expli-citly when need-ed</div>
</body>
</html>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 highly useful for those who are involved in the development and design of the front end with HTML and CSS.
Recommended Articles
This is a guide to CSS Hyphens. Here we discuss the introduction to CSS Hyphens, how hyphens property works along with respective examples. You may also have a look at the following articles to learn more –
