CSS text wrapping beyond the specified line
CSS Text Wrap
In web design, long text often overflows the container’s boundaries. To automatically wrap text when it exceeds the container’s boundaries, CSS can be used. This article will detail how to use CSS to achieve this effect and provide several sample code examples for reference.
1. Use the word-wrap Property
The word-wrap property specifies whether a word wraps when it’s too long to fit in the container. It can be set to normal or 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;
padding: 10px;
}
.text {
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="container">
<p class="text">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 geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com</p>
</div>
</body>
</html>
Output:
Result: Text content automatically wraps when it exceeds the width of the container.
2. Use the overflow-wrap Property
The overflow-wrap property specifies whether a word is allowed to wrap when it is too long to fit in the container. It can be set to normal or break-word.
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;
padding: 10px;
}
.text {
overflow-wrap: break-word;
}
</style>
</head>
<body>
<div class="container">
<p class="text">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 geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com</p>
</div>
</body>
</html>
Output:
Running result: Text content will automatically wrap when it exceeds the container width.
3. Using the white-space Property
white-space property is used to specify how whitespace is handled within an element. Can be set to normal, nowrap, pre, pre-line, or pre-wrap.
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;
padding: 10px;
}
.text {
white-space: normal;
}
</style>
</head>
<body>
<div class="container">
<p class="text">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 geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com</p>
</div>
</body>
</html>
Output:
Running result: Text content will automatically wrap when it exceeds the container width.
4. Use the text-overflow Property
The text-overflow property specifies how to display overflowing text. You can set it to clip, ellipsis, or string.
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;
padding: 10px;
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 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 will be truncated and ellipsis will be displayed when it exceeds the container width.
5. Use the max-width Property
The max-width property specifies the maximum width of an element. When the element’s content exceeds the maximum width, it automatically wraps to new lines.
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;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
This is a long text that will break into multiple lines if it exceeds the maximum width of the container. 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 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 will automatically wrap when it exceeds the maximum width.