How Can I Use Word Wrap Property Using HTML And CSS

admin_img Posted By Bajarangi soft , Posted On 05-11-2020

In CSS word-wrap property allows long words to be able to be broken and wrap onto the next line. So today we discuss how to do it.

How Can I Use Word Wrap Property Using HTML And CSS

CSS For Allow long words to be able to be broken and wrap onto the next line.

p.test {
    width: 30em;
    border: 1px solid #000000;
    word-wrap: break-word;
}


Complete Code For Using Word Wrap Property Using HTML And CSS

<!DOCTYPE html>
<html>
<head>
    <title>How To Set Text Effects For HTML Element Using CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>

</head>
<style>
    body {
        background: #c7254e;
    }
    p.test {
        width: 30em;
        border: 1px solid #000000;
        word-wrap: break-word;
    }
</style>
<body>
<br/><br/>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: white;">Use Word Wrap Property Using HTML And CSS</h1>
    </div>
    <br>
    <div class="well">
        <p class="test"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
            tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
            tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    </div>
</div>
</body>
</html>

Related Post