Hurry! Try our new Interactive Courses for FREE. 🥳   🚀

CSS hyphens Property

The hyphens property in CSS is known for specifying how words must be hyphenated when the text wraps across several lines. This can entirely prevent hyphenation or hyphenate at points within the text, which are manually specified, or it lets the browser automatically insert hyphens wherever needed.

Hyphenation rules are quite language-specific. In the case of HTML language, it is determined by the attribute lang and hence, browsers hyphenate only if this attribute is present.

Note: The rules for performing hyphenation are not defined explicitly by the specification. Hence, the exact hyphenation can vary from one browser to another.

Syntax

none | manual | auto

Example: CSS hyphens Property

In the example below, we are using the hyphens property to make our text hyphenated in different ways using different values. So, here we have given the values as none, manual, and auto and have given three different elements for all the three values so that it gets distinguished easily. It can be seen in the output image.

<!DOCTYPE html>
<html>
<head>
	<title>The hyphens property in CSS</title>
	<style type="text/css">
		dd {
	  width: 55px;
	  border: 1px solid black;
	  color: rebeccapurple;
	 }
	dd.none {
	  -webkit-hyphens: none;
	  -ms-hyphens: none;
	  hyphens: none;
	}
	dd.manual {
	  -webkit-hyphens: manual;
	  -ms-hyphens: manual;
	  hyphens: manual;
	}
	dd.auto {
	  -webkit-hyphens: auto;
	  -ms-hyphens: auto;
	  hyphens: auto;
	}
	</style>
</head>
<body>
	<dl> <dt><code>none</code>: no hyphen; overflow if needed</dt>
		<dd lang="en" class="none">An extreme&shy;ly long English word</dd> <dt><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)</dt>
		<dd lang="en" class="manual">An extreme&shy;ly long English word</dd> <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
		<dd lang="en" class="auto">An extreme&shy;ly long English word</dd>
	</dl>
</body>
</html>

Output

Example 2: CSS hyphens Property

Here in the second example, we have given the hyphens property value as auto for all the elements. Hence, our text gets hyphenated accordingly and the output image can be seen as the result.

<!DOCTYPE html>
<html>
<head>
	<title>The hyphens property in CSS</title>
	<style type="text/css">
		dd {
	  width: 55px;
	  border: 4px solid red;
	  color: green;
	 }
	dd.none {
	  -webkit-hyphens: auto;
	  -ms-hyphens: auto;
	  hyphens: auto;
	}
	dd.manual {
	  -webkit-hyphens: auto;
	  -ms-hyphens: auto;
	  hyphens: auto;
	}
	dd.auto {
	  -webkit-hyphens: auto;
	  -ms-hyphens: auto;
	  hyphens: auto;
	}
	</style>
</head>
<body>
	<dl> <dt><code>none</code>: auto</dt>
		<dd lang="en" class="none">An extreme&shy;ly long English word</dd> <dt><code>manual</code>:auto</dt>
		<dd lang="en" class="manual">An extreme&shy;ly long English word</dd> <dt><code>auto</code>: auto (if needed)</dt>
		<dd lang="en" class="auto">An extreme&shy;ly long English word</dd>
	</dl>
</body>
</html>

Output

Live Example

Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.

Browser Compatibility

The term 'browser compatibility' indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. It is of immense importance today when there is a large variety of web browsers available.

Name of Browser Background size contain and cover
Chrome 55 55
Edge 12 12
Firefox 43 43
Internet Explorer 10 10
Opera 44 44
Safari 5.1 5.1
Webview Android 55 55
Chrome Android 55 55
Firefox Android 43 43
Opera Android 43 43
IOS Safari 4.2 4.2
Samsung Internet 6.0 6.0

Conclusion

The initial value for the hyphens property in CSS is normal. This property is applicable to all the elements. It is an inherited property. The computed value for this property is the as specified one. The animation type of this property is discrete.