CSS beyond line break
CSS Line Wrapping
In web development, we often encounter situations where text content is too long and exceeds the boundaries of its container. To automatically wrap text when it exceeds its container, we can use CSS. This article will detail how to use CSS to handle line wrapping.
1. Using the word-wrap Property
The word-wrap property specifies whether to wrap a word when it’s too long to fit on a single line. By default, long words overflow the container. You can force a word to wrap by setting word-wrap: break-word;.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Word Wrap Example</title>
<style> .container {
width: 200px;
border: 1px solid #ccc;
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="container">
This is a long text that will break into multiple lines if it exceeds the container width. geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com
</div>
</body>
</html>
Output:
Result: Text automatically wraps when it exceeds the width of its container.
2. Use the overflow-wrap property
The overflow-wrap property is similar to word-wrap in that it controls how text wraps. The difference is that the overflow-wrap property wraps within words, while the word-wrap property wraps between words.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Overflow Wrap Example</title>
<style>
.container {
width: 200px;
border: 1px solid #ccc;
overflow-wrap: break-word;
}
</style>
</head>
<body>
<div class="container">
Thisisalongtextthatwillbreakintomultiplelinesifitexceedsthecontainerwidth.geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com
</div>
</body>
</html>
Output:
Result: Text automatically wraps when it exceeds the width of the container, even within words.
3. Using the white-space Property
white-space property controls how whitespace within an element is handled, including spaces and line breaks. Setting white-space: pre-wrap; automatically wraps text when it exceeds the container.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>White Space Example</title>
<style>
.container {
width: 200px;
border: 1px solid #ccc;
white-space: pre-wrap;
}
</style>
</head>
<body>
<div class="container">
This is a long text that will break into multiple lines if it exceeds the container width. geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com
</div>
</body>
</html>
Output:
Result: Text content automatically wraps when it exceeds the width of the container.
4. Using the text-overflow Property
The text-overflow property controls how text overflows. Setting text-overflow: ellipsis; displays an ellipsis when text exceeds the container.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Overflow Example</title>
<style>
.container {
width: 200px;
border: 1px solid #ccc;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="container">
This is a long text that will be truncated with an ellipsis if it exceeds the container width. geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com
</div>
</body>
</html>
Output:
Result: When text content exceeds the container width, an ellipsis is displayed.
5. Use the max-width Property
The max-width property is used to limit the maximum width of an element. When the text content exceeds the maximum width, it will automatically wrap.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Max Width Example</title>
<style>
.container {
max-width: 200px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
This is a long text that will break into multiple lines if it exceeds the maximum width. geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com
</div>
</body>
</html>
Output:
Running Result: Text content automatically wraps when it exceeds the maximum width.
6. Using the word-break Property
The word-break property controls the line-breaking behavior of non-Chinese text. Setting word-break: break-all; forces a line break when non-Chinese text exceeds its container.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Word Break Example</title>
<style>
.container {
width: 200px;
border: 1px solid #ccc;
word-break: break-all;
}
</style>
</head>
<body>
<div class="container">
Thisisalongtextthatwillbreakintomultiplelinesifitexceedsthecontainerwidth.geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com
</div>
</body>
</html>
Output:
Running result: Non-Chinese text will be forced to wrap when it exceeds the container width.
7. Using the hyphens Property
The hyphens property controls how text is broken. Setting hyphens: auto; automatically breaks text when it exceeds its container width.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hyphens Example</title>
<style>
.container {
width: 200px;
border: 1px solid #ccc;
hyphens: auto;
}
</style>
</head>
<body>
<div class="container">
This is a long text that will break into multiple lines if it exceeds the container width. geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com
</div>
</body>
</html>
Output:
Result: Text will automatically break when it exceeds the width of the container.
8. Using the line-break Property
The line-break property controls how text breaks. By setting line-break: anywhere;, you can achieve line breaks anywhere when the text exceeds the container.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Line Break Example</title>
<style>
.container {
width: 200px;
border: 1px solid #ccc;
line-break: anywhere;
}
</style>
</head>
<body>
<div class="container">
Thisisalongtextthatwillbreakintomultiplelinesifitexceedsthecontainerwidth.geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com
</div>
</body>
</html>
Output:
Result: Text content can wrap at any position when it exceeds the container width.
9. Using the overflow Property
The overflow property controls how content overflows an element. Setting overflow: hidden; can hide the overflow when text exceeds its container.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Overflow Example</title>
<style>
.container {
width: 200px;
border: 1px solid #ccc;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
This is a long text that will be hidden if it exceeds the container width. geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com
</div>
</body>
</html>
Output:
Result: Text content will be hidden when it exceeds the container width.
10. Using the text-align Property
The text-align property controls the alignment of text content. By setting text-align: justify;, you can achieve justification and automatic line wrapping of text content when it exceeds the container width.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Align Example</title>
<style>
.container {
width: 200px;
border: 1px solid #ccc;
text-align: justify;
}
</style>
</head>
<body>
<div class="container">
This is a long text that will break into multiple lines if it exceeds the container width. geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com
</div>
</body>
</html>
Output:
Result: When text exceeds the container width, it will be aligned and automatically wrapped.