Home »
CSS
The word-break Property in CSS
CSS | word-break Property: Here, we are going to learn about the word-break property with its syntax and examples in CSS (Cascading Style Sheet).
Submitted by Anjali Singh, on January 10, 2020
CSS | word-break Property
Introduction:
Designing, developing and editing goes hand in hand while creating a web page or website. Paying attention to every element like a grid, containers, texts, etc is very crucial to build a responsive website that would attract many users. Therefore, any professional web developer would pay utmost attention to each one of these aspects and any beginner should be aware of these aspects to kickstart their web development experience.
Gist:
What is the most fundamental element that comes to mind when you are considering to develop a web page? Words! If that was your answer, then pat yourself because you are already aware of what we are going to discuss in this article. The discussion here will revolve around the most basic aspect of web development that is "dealing with words". But what actually are we going to discuss about the words here? That property is known as word-break property in CSS and to understand that let us look at the definition.
Definition:
The word-break property in CSS is used to specify how words are going to break when they reach the end of a line. Yes, you heard that right, a very simple property with a very basic function. You can decide how your words are going to break when they reach the end of a line, you can specify them to break from any alphabet, letter or any word. This property may sound very easy but it needs to be implemented very wisely as this property could play a major role in how your web page or website will appear to the users. CSS Syntax will help you get a better idea of the property.
Syntax:
Element{
word-break: normal|break-all|keep-all|break-word;
}
Now, there are certain values that are taken up by the word-break property. Let us look at them one by one.
1) word-break: break-all
The first and foremost value of the word-break property is the break-all value. This value as the name suggests helps in breaking words at any character and that again prevents overflow.
Syntax:
Element{
word-break:break-all;
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
width: 180px;
border: 1px solid #f40;
word-break: break-all;
}
</style>
</head>
<body>
<h1>The word-break Property</h1>
<h2> break-all</h2>
<p>This is IncludeHelp.ThisisIncludeHelp.This is IncludeHelp.This is IncludeHelp.</p>
</body>
</html>
Output
In the above example, the word breaks to fit the width of the box and prevents overflow.
2) word-break: normal
The normal value of the word-break property can be referred to as a default property. This value when enabled does nothing but uses default line break rules.
Syntax:
Element{
word-break:normal;
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
width: 180px;
border: 1px solid #f40;
word-break: normal;
}
</style>
</head>
<body>
<h1>The word-break Property</h1>
<h2> normal</h2>
<p>This is IncludeHelp.ThisisIncludeHelp.This is IncludeHelp.This is IncludeHelp.</p>
</body>
</html>
Output
In the above example, the word uses the default line break rules.
3) word-break: keep-all
The function of the keep-all value is a bit different from the other values as this value tells that the word breaks shall not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior will be the same as the value normal.
Syntax:
Element{
word-break:keep-all;
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
width: 180px;
border: 1px solid #f40;
word-break: keep-all;
}
</style>
</head>
<body>
<h1>The word-break Property</h1>
<h2> keep-all</h2>
<p>This is IncludeHelp.ThisisIncludeHelp.This is IncludeHelp.This is IncludeHelp.</p>
</body>
</html>
Output
In the above example, it is the same as the normal value of the word-break property.
4) word-break: break-word
The last but not the least, the break-word value is used to prevent overflow but here word may be broken at arbitrary points.
Syntax:
Element{
word-break:break-word;
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
width: 180px;
border: 1px solid #f40;
word-break: break-word;
}
</style>
</head>
<body>
<h1>The word-break Property</h1>
<h2>break-word</h2>
<p>This is IncludeHelp.ThisisIncludeHelp.This is IncludeHelp.This is IncludeHelp.</p>
</body>
</html>
Output
In the above example, the break-word property is used to prevent overflow.
CSS Tutorial & Examples »