CSS
How to break line without spaces using CSS?
It happens sometimes that there is a long text that goes beyond the container element.
In the following image, we can see the problem of the text going beyond the container div element.
In this article, we will learn the solution for the question “how to break line without spaces using CSS”.
How to break line without spaces using CSS?
We use the CSS overflow-wrap: break-word; to break line.
This CSS property will break the word and will not allow the text to go beyond the container element.
This property will break the word that is exactly at the end of the line and it will not care about the actual word, it will just break it into the next line.
Let’s check this with a sample code:-
CSS :-
div {
overflow-wrap: break-word;
width: 250px;
border: solid 1px red;
padding: 40px;
}
HTML :-
<div>This_is_a_ver_long_text_without_any_spaces.This_is_a_ver_long_text_without_any_spaces.</div>
Output :-
In the CSS section, we have given the style to the div element. CSS property overflow-wrap: break-word; has been applied to the div.
In HTML code, we have created a div with long text without any white spaces in between.
In the output image, we can see that a text has been shifted to the next line and no longer overlaps the container.
Recap
In this way, we have easily learned how to have line breaks using CSS.
So the next step for you will be to try this code with your own hands and that will be fun.
