How to prevent long words from breaking my div ?

Last Updated : 31 May, 2023

Cascading Style Sheets fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independently of the HTML that makes up each web page.

CSS is easy to learn and understand, but it provides powerful control over the presentation of an HTML document.

In this article, we will learn how to prevent long words from breaking my HTML div.

We can prevent one long word without breaking your HTML div element by various techniques.

Approach:

We are using an HTML div element in which we will be showing the HTML paragraph element.
We use word-break soft hyphens  and <wbr> tags on the paragraph element to show the output.

Example 1: In this example, we can make use of soft hyphen( ). A soft hyphen will prevent long words from breaking the HTML div element.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: black;
            text-align: center;
        }
 
        div {
            border: 2px solid black;
            width: 200px;
            margin-left: 20px;
            background-color: lightgrey;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <div>
        <p>A­computerscienceprotalforgeeks</p>
    </div>
</body>
</html>

Output:

Example 2: In this technique, we can make use of the word break <wbr> tag. It is used to specify where in a text it would be fine to add a line break.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: black;
            text-align: center;
        }
 
        div {
            border: 2px solid black;
            width: 200px;
            margin-left: 20px;
            background-color: lightgrey;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <div>
        <p>A<wbr>computerscienceprotalforgeeks</p>
    </div>
</body>
</html>