How To Do White Space Using Cascading Style Sheets

Posted By Bajarangi soft , Posted On 02-11-2020

In CSS The white-space property specifies how white-space inside an element is handled. So today we are discussing how to do it.

How To Do White Space Using Cascading Style Sheets

Step 1:Create index.html file and implement as below code in it.

<p>
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
</p>

Step 2:Implement CSS code as below to white space.

<style>
    body {
        background: #2e9ad0;
    }

    p {
        white-space: nowrap;
        font-size: 30px;
    }

</style>

Complete Code For White Space Using CSS.

<!DOCTYPE html>
<html>
<head>
    <title>How To Do White Space Using Cascading Style Sheets</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
    body {
        background: #2e9ad0;
    }

    p {
        white-space: nowrap;
        font-size: 30px;
    }

</style>
<body>
<br/><br/>
<div class="container">
    <br><br><br>
    <div class="text-center">
        <h1 id="color" style="color: white;">White Space Using Cascading Style Sheets</h1>
    </div>
    <br>
    <div class="well">
        <p>
            This is some text. This is some text. This is some text.
            This is some text. This is some text. This is some text.
            This is some text. This is some text. This is some text.
            This is some text. This is some text. This is some text.
            This is some text. This is some text. This is some text.
        </p>
    </div>
    <br>
</div>
</body>
</html>

Related Post