CSS line break display
CSS Line Wrapping
In web development, text wrapping is often necessary. CSS provides a variety of ways to achieve this. This article will introduce these methods in detail and provide sample code for reference.
1. Using the white-space Property
The white-space property controls how whitespace is handled within an element’s text. A value of normal collapses multiple whitespace characters into a single space and wraps them at line breaks.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
.text {
white-space: normal; }
</style>
</head>
<body>
<div class="text">Welcome to geek-docs.com</div>
</body>
</html>
Output:
Running result:
Welcome to
geek-docs.com
2. Using the word-wrap Property
The word-wrap property specifies whether to allow line breaks within words. The break-word value causes line breaks within words.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
.text {
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="text">Welcome to geek-docs.com</div>
</body>
</html>
Output:
Running result:
Welcome to
geek-docs.com
3. Using the word-break Property
The word-break property specifies where to break a word for a line break. The break-all value causes a line break within a word.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
.text {
word-break: break-all;
}
</style>
</head>
<body>
<div class="text">Welcome to geek-docs.com</div>
</body>
</html>
Output:
Running Results:
Welcome to
geek-docs.com
4. Using the overflow-wrap Property
The overflow-wrap property specifies whether to allow line breaks within words. The break-word value causes line breaks within words.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
.text {
overflow-wrap: break-word;
}
</style>
</head>
<body>
<div class="text">Welcome to geek-docs.com</div>
</body>
</html>
Output:
Running Results:
Welcome to
geek-docs.com
5. Using the text-wrap Property
The text-wrap property specifies whether to allow line wrapping within text. The balance value causes line wrapping within the text.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
.text {
text-wrap: balance;
}
</style>
</head>
<body>
<div class="text">Welcome to geek-docs.com</div>
</body>
</html>
Output:
Running Results:
Welcome to
geek-docs.com
6. Using the text-overflow Property
The text-overflow property specifies how text should be displayed when it overflows its container. The value ellipsis displays an ellipsis when text overflows.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="text">Welcome to geek-docs.com</div>
</body>
</html>
Output:
Running Results:
Welcome to geek-docs…
7. Use the word-spacing Property
The word-spacing property specifies the spacing between words. You can use negative values to achieve line breaks within words.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
.text {
word-spacing: -1px;
}
</style>
</head>
<body>
<div class="text">Welcome to geek-docs.com</div>
</body>
</html>
Output:
Running Results:
Welcome to
geek-docs.com
8. Using the hyphens Property
The hyphens property specifies whether to allow word breaks within a word. The auto value causes word breaks within a word.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
.text {
hyphens: auto;
}
</style>
</head>
<body>
<div class="text">Welcome to geek-docs.com</div>
</body>
</html>
Output:
Running Results:
Welcome to geek-
docs.com
9. Using the line-break Property
The line-break property specifies whether line breaks are allowed within characters. The strict value causes line breaks within characters.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
.text {
line-break: strict;
}
</style>
</head>
<body>
<div class="text">Welcome to geek-docs.com</div>
</body>
</html>
Output:
Running Results:
Welcome to geek-
docs.com
10. Using the text-align Property
The text-align property specifies text alignment. You can achieve automatic line-wrapping alignment by setting the justify value.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
.text {
text-align: justify;
}
</style>
</head>
<body>
<div class="text">Welcome to geek-docs.com</div>
</body>
</html>
Output:
Running Results:
Welcome to geek-docs.com
Conclusion
This article introduced various methods for implementing text wrapping in CSS, including the white-space, word-wrap, word-break, overflow-wrap, text-wrap, text-overflow, word-spacing, hyphens, line-break, and text-align properties. By flexibly utilizing these properties, you can achieve a variety of text wrapping effects.