Cascading Style Sheets fondly known as CSS, is a merely designed language supposed to simplify the method of creating net pages presentable. CSS lets you apply types to net pages. Extra importantly, CSS allows you to do that unbiased of the HTML that makes up every net web page.
CSS is simple to study and perceive, but it surely offers highly effective management over the presentation of an HTML doc.
On this article, we are going to learn to stop lengthy phrases from breaking my HTML div.Â
We will stop one lengthy phrase with out breaking your HTML div aspect by numerous methods.Â
Strategy:Â
- We’re utilizing an HTML div aspect by which we can be displaying the HTML paragraph aspect.
- We use word-break delicate hyphens ­ and <wbr> tags on the paragraph aspect to indicate the output.
Instance 1: On this instance, we are able to make use of sentimental hyphen( Â). A delicate hyphen will stop lengthy phrases from breaking the HTML div aspect. Â
HTML
<!DOCTYPE html>
<html>
<head>
    <model>
        p{
            coloration:black;
            text-align:middle;
        }
        div{
            border:2px strong black;
            width:200px;
            margin-left:20px;
            background-color:lightgrey;
        }
    </model>
</head>
 Â
<physique>
    <h1 model="coloration:inexperienced">GeeksforGeeks</h1>
    <div>
         Â
<p>AÂcomputerscienceprotalforgeeks</p>
 Â
    </div>
</physique>
</html>
|
Output:
Â
Instance 2: On this method, we are able to make use of the phrase break <wbr> tag. It’s used to specify the place in a textual content it might be positive so as to add a line break.
HTML
<!DOCTYPE html>
<html>
 Â
<head>
    <model>
        p{
            coloration:black;
            text-align:middle;
        }
        div{
            border:2px strong black;
            width:200px;
            margin-left:20px;
            background-color:lightgrey;
        }
    </model>
</head>
 Â
<physique>
    <h1 model="coloration:inexperienced">GeeksforGeeks</h1>
    <div>
         Â
<p>A<wbr>computerscienceprotalforgeeks</p>
 Â
    </div>
</physique>
</html>
|
Output:
Â
