CSS text wrap when text exceeds width
CSS Text Wrap When Width Exceeds CSS
In web design, text often exceeds the width of its container. In these cases, it’s necessary to wrap the text to ensure the page’s aesthetics and readability. In CSS, there are several ways to achieve this. We’ll explain each method below, along with detailed code examples.
1. Using the word-wrap Property
The word-wrap property specifies whether to wrap words when they are too long to fit on a single line. It can be set to normal (the default, which doesn’t allow wrapping) or break-word (which allows wrapping).
Sample code:
.container {
width: 200px;
border: 1px solid #ccc;
word-wrap: break-word;
}
.text {
width: 100%;
}
<div class="container">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Run results: The text will wrap automatically when it exceeds the width of the container.
2. Using the white-space property
The white-space property specifies how to handle whitespace within an element. You can set it to normal (the default, collapsing whitespace), nowrap (no line wrapping), pre (preserve whitespace), or pre-wrap (preserve whitespace and allow line wrapping).
Sample Code:
.container {
width: 200px;
border: 1px solid #ccc;
white-space: pre-wrap;
}
.text {
width: 100%;
}
<div class="container">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Result: Text will automatically wrap when it exceeds the container width.
3. Use the overflow-wrap Property
The overflow-wrap property specifies whether to allow line wrapping when a word is too long to fit on a single line. It can be set to normal (the default, which does not allow line wrapping) or break-word (which allows line wrapping).
Sample code:
.container {
width: 200px;
border: 1px solid #ccc; overflow-wrap: break-word;
}
.text {
width: 100%;
}
<div class="container">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Result: Text will automatically wrap when it exceeds the container width.
4. Using the text-overflow property
text-overflow property specifies how to display the overflow portion when text overflows its container. Can be set to clip (clip overflow), ellipsis (display ellipsis), etc.
Sample Code:
.container {
width: 200px;
border: 1px solid #ccc;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.text {
width: 100%;
}
<div class="container">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Result: Ellipses are displayed when the text 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 will automatically wrap.
Sample Code:
.container {
max-width: 200px;
border: 1px solid #ccc;
}
.text {
width: 100%;
}
<div class="container">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Result: Text will automatically wrap when it exceeds the maximum width.
6. Use flex layout
Using flex layout makes it easy to wrap text when it exceeds the width. By setting flex-wrap: wrap, child elements will automatically wrap within their parent container.
Sample Code:
.container {
display: flex;
flex-wrap: wrap;
width: 200px;
border: 1px solid #ccc;
}
.text {
width: 100%;
}
<div class="container">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Result: Text automatically wraps when it exceeds the container width.
7. Use Grid Layout
Using a grid layout can also achieve the effect of text wrapping when it exceeds the width. By setting grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)), child elements can automatically wrap within the parent container.
Sample code:
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px;
width: 200px;
border: 1px solid #ccc;
}
.text {
width: 100%;
}
<div class="container">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Result: Text will automatically wrap when it exceeds the container width.
8. Use the calc() function
The calc() function in CSS performs mathematical calculations and can be used to calculate the width of an element, thereby achieving the effect of wrapping text when the width exceeds the container width. </p>
<p>Sample Code: </p>
<pre><code class="language-css line-numbers">.container {
width: calc(50% - 10px);
border: 1px solid #ccc;
}
.text {
width: 100%;
}
<div class="container">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Result: Text will automatically wrap when it exceeds the container width.
9. Use media queries
By using media queries, you can set different styles based on different screen sizes, thus achieving the effect of text wrapping when it exceeds the width.
Sample code:
.container {
width: 200px;
border: 1px solid #ccc;
}
.text {
width: 100%;
}
@media screen and (max-width: 768px) {
.container {
width: 100%;
}
}
<div class="container">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
Result: When the screen width is less than 768px, the text will automatically wrap.
10. Dynamically Calculate with JavaScript
Using JavaScript to dynamically calculate the text width and the container width, you can achieve the effect of wrapping text when it exceeds the width.
Sample Code:
<div class="container">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
const container = document.querySelector('.container');
const text = document.querySelector('.text');
if (text.offsetWidth > container.offsetWidth) {
text.style.whiteSpace = 'normal';
}
Result: When the text width exceeds the container width, it will automatically wrap.
Through the above 10 methods, we can achieve the effect of wrapping text when it exceeds the width in web design. Choosing the appropriate method to achieve text wrapping based on actual needs and layout conditions can make the page look more beautiful and neat.