CSS automatic line wrapping when text exceeds width
CSS Automatic Line Wrap When Width Exceeds
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
</div>
</body>
</html>
Output:
Result: Text will automatically wrap if it exceeds the container width.
2. Using the white-space Property
The white-space property controls how whitespace is handled within an element. The pre-wrap value preserves whitespace and allows line breaks.
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
</div>
</body>
</html>
Output:
<!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">
This is a long text that will break into multiple lines if it exceeds the container width geek-docs.com
</div>
</body>
</html>
Output:
Result: Text automatically wraps when it exceeds the width of the container.
4. Using the text-overflow Property
The text-overflow property specifies how text should be displayed when it overflows its container. When set to ellipsis, ellipsis is displayed when text overflows.
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
</div>
</body>
</html>
Output:
Result: When text exceeds the container width, an ellipsis is displayed.
5. Using the max-width Property
The max-width property specifies the maximum width of an element. When the 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
</div>
</body>
</html>
Output:
Result: Text automatically wraps when it exceeds the maximum width.
6. Using the flex-wrap Property
The flex-wrap property specifies whether items within a flex container are allowed to wrap. When set to wrap, items automatically wrap.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex Wrap Example</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
width: 200px;
border: 1px solid #ccc;
}
.item {
flex: 1 0 50%;
}
</style>
</head>
<body>
<div class="container">
<div class="item">This is a long text that will break into multiple lines if it exceeds the container width geek-docs.com</div>
<div class="item">This is </div>
</div>
</body>
</html>
Output:
Result: Items will automatically wrap if they exceed the container width.
7. Using the grid-template-columns Property
The grid-template-columns property specifies the column width of the grid container. When set to repeat(auto-fill, minmax(200px, 1fr)), columns will automatically fill and wrap when they exceed the container width.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid Template Columns Example</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}
.item {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="item">This is a long text that will break into multiple lines if it exceeds the container width geek-docs.com</div>
<div class="item">This is another long text that will break into multiple lines if it exceeds the container width geek-docs.com</div>
</div>
</body>
</html>
Output:
Result: Items will automatically wrap if they exceed the container width.
8. Using the column-count Property
The column-count property specifies the number of columns in an element. It automatically wraps content if it exceeds the number of columns.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Column Count Example</title>
<style>
.container {
column-count: 2;
column-gap: 20px;
}
</style>
</head>
<body>
<div class="container">
This is a long text that will break into multiple columns if it exceeds the container width geek-docs.com
</div>
</body>
</html>
Output:
Result: Text will automatically wrap and split into two columns when it exceeds the container width.
9. Using the break-inside Property
The break-inside property specifies how to break pages within an element. When set to avoid, it will avoid page breaks within the element.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Break Inside Example</title>
<style>
.container {
width: 200px;
border: 1px solid #ccc;
}
.item {
break-inside: avoid;
}
</style>
</head>
<body>
<div class="container">
<div class="item">This is a long text that will try to avoid breaking inside if it exceeds the container width geek-docs.com</div>
</div>
</body>
</html>
Output:
Result: When text exceeds the container width, pagination within the element is avoided as much as possible.
10. Using the hyphens Property
The hyphens property specifies whether to allow hyphenation within words. When set to auto, hyphenation is automatically performed when necessary.
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 and hyphenate if it exceeds the container width geek-docs.com
</div>
</body>
</html>
Output:
Running result: Text automatically wraps when it exceeds the container width, and breaks words when necessary.
Through the example code above, we can see how different CSS properties can achieve automatic wrapping when text exceeds the width. In web development, choosing the appropriate properties to control text wrapping based on actual needs ensures clear content display and improves the user experience.