CSS White Space and CSS Line Height with Examples.

Published by StudyMuch on

CSS White Space StudyMuch

CSS White Space and CSS Line Height with Examples.

In this tutorial we will going learn CSS White Space and CSS Line Height with programming examples, this properties is a part of CSS Text, through this properties we decorate the text in different-different style.

CSS White Space

In CSS white-space property sets how the while space is handled inside an element, to use this property we need to use the valid value in CSS, and this value are given below.

Valid value to use the white-space Property;

  • nowrap: Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source.
  • normal: In this value of white-space, the sequence of white space is collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to full line boxes.
  • pre: In this value the sequences of white space are preserved. Lines are only broken at newline characters in the source and at <br> tag.
  • pre-line: In this value the sequences of white space are also collapsed. Lines are broken at newline characters, at <br> element and as necessary to fill line boxes.
  • pre-warp: Here the sequences of white space are preserved. Lines are broken at newline characters, at <br> element and as necessary to fill line boxes.

Now we will see the programming example of white-space property with using above given property.

Example of CSS White Space using normal value;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
content="IE=edge">
    <meta name="viewport"
content="width=device-width,
 initial-scale=1.0">
    <title>CSS White Space, normal 
    value</title>
    <style type="text/css">
        div{
            white-space:normal;
            border: 1px
            solid blue;
            background: lightblue;
            color:darkgreen;
        }
    </style>
</head>
<body>
   <div>
       Welcome to StudyMuch, Here you 
       will learn coding.
       Welcome to StudyMuch, Here you 
       will learn coding.
       Welcome to StudyMuch, Here you
       will learn coding.
       Welcome to StudyMuch, Here you 
       will learn coding.
   </div>
</body>
</html>

Output of above programming;

Example of CSS White Space using pre value;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
content="IE=edge">
    <meta name="viewport"
content="width=device-width, 
 initial-scale=1.0">
    <title>CSS White Space, pre
    value</title>
    <style type="text/css">
        div{
            white-space:pre;
            border: 1px
solid rgb(255, 0, 0);
            background: rgb(221, 230, 173);
            color:rgb(0, 15, 100);
        }
    </style>
</head>
<body>
   <div>
       Welcome to StudyMuch, Here you 
       will learn coding.
       Welcome to StudyMuch, Here you 
       will learn coding
       Welcome to StudyMuch, Here you
       will learn coding.
       Welcome to StudyMuch, Here you
       will learn coding.
   </div>
</body>
</html>

Output of above programming;

Example of CSS White Space using pre-line value;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
content="IE=edge">
    <meta name="viewport"
content="width=device-width, 
initial-scale=1.0">
    <title>CSS White Space pre-line
    value</title>
    <style type="text/css">
        div{
            white-space:pre-line;
            border: 1px
solid rgb(255, 72, 0);
            background: rgb(173, 230, 187);
            color:rgb(18, 0, 100);
        }
    </style>
</head>
<body>
   <div>
       Welcome to StudyMuch, Here you 
       will learn coding.
       Welcome to StudyMuch, Here you 
       will learn coding.
       Welcome to StudyMuch, Here you
       will learn coding.
       Welcome to StudyMuch, Here you
       will learn coding.
   </div>
</body>
</html>

Output of above programming;

Example of CSS White Space using nowrap value;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
content="IE=edge">
    <meta name="viewport"
content="width=device-width,
 initial-scale=1.0">
    <title>CSS White Space</title>
    <style type="text/css">
        div{
            white-space:nowrap;
            border: 1px
solid rgb(43, 255, 0);
            background: rgb(173, 226, 230);
            color:rgb(100, 0, 0);
        }
    </style>
</head>
<body>
   <div>
       Welcome to StudyMuch, Here you
       will learn coding.
       Welcome to StudyMuch, Here you 
       will learn coding.
       Welcome to StudyMuch, Here you
       will learn coding.
       Welcome to StudyMuch, Here you
       will learn coding.
   </div>
</body>
</html>

Output of above programming example;

Above you can see the output of all programming example of White Space, In CSS White Space all valid value example you can see above the different-different white space are shown in all output of programming in text area. That is the white space in text area. Now neat we will lean CSS Line Height below.

CSS Line Height

In CSS Text the line-height property specifies the amount of space used in lines such as in text. Using this property, we need to use different valid value, these values are given below with function.

Valid value to use line-height property;

  • <length>: This value set the of line height with length value, like; px, pc, pt etc.
  • <percentage>: This value is set line height with percent value.
  • <number>: In this, the value is multiplied by the element’s current font size; this is the preferred way to set line-height.
  • normal: Its value is depended on the user.

Now we see the example of line height property with output of programming.

Example of CSS Line Height using length value;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
content="IE=edge">
    <meta name="viewport"
content="width=device-width,
 initial-scale=1.0">
    <title>CSS White Space</title>
    <style type="text/css">
        .length{
            line-height: 40px;
            border: 1pt
solid rgb(251, 255, 0);
            background: rgb(173, 202, 230);
            color:rgb(18, 0, 100);
        }
    </style>
</head>
<body>
    <P style="text-align: center;">Using
     35px (length value).</P>
   <div class="length">
       Welcome to StudyMuch, Here you
       will learn coding.
       Welcome to StudyMuch, Here you
       will learn coding.
       Welcome to StudyMuch, Here you 
       will learn coding.
       Welcome to StudyMuch, Here you 
       will learn coding.
   </div>
</body>
</html>

Output of above programming examples;

Example of CSS Line Hight using percentage value;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
content="IE=edge">
    <meta name="viewport"
content="width=device-width,
 initial-scale=1.0">
    <title>CSS White Space</title>
    <style type="text/css">
        .length
            line-height: 400%;
            border: 1pt
solid rgb(255, 0, 0);
            background: rgb(230, 173, 221);
            color:rgb(18, 0, 100);
        }
    </style>
</head>
<body>
    <P style="text-align: center;">Using
    300% (percent value)</P>
   <div class="length">
       Welcome to StudyMuch, Here you 
       will learn coding.
       Welcome to StudyMuch, Here you 
       will learn coding.
       Welcome to StudyMuch, Here you 
        will learn coding.
       Welcome to StudyMuch, Here you 
       will learn coding.
   </div>
</body>
</html>

Output of above example;

You can see the output of programming example, there the spacing of line is different, you use this property to set the line spacing in different space.

So, you learned the CSS White Space and CSS Line Height with programming examples of all the properties are given in both CSS text property (white space and line height). I hope you have read this tutorial well and learned something from it. If you have any doubt from this tutorial, you ask in the comment section.

Read Also-

 

Categories: Uncategorized
Tags:

4 Comments

zoritoler imol · July 3, 2022 at 2:19 am

naturally like your web site however you need to check the spelling on several of your posts. Many of them are rife with spelling issues and I in finding it very troublesome to tell the truth however I will definitely come back again.

Reply

Justin Wakeham · September 23, 2022 at 8:20 am

Thank you for the sensible critique. Me & my neighbor were just preparing to do some research about this. We got a grab a book from our area library but I think I learned more from this post. I’m very glad to see such magnificent info being shared freely out there.

Reply

Classie Widger · January 16, 2023 at 7:23 am

I regard something truly special in this website .

Reply

Binance · April 12, 2023 at 6:40 am

I don’t think the title of your article matches the content lol. Just kidding, mainly because I had some doubts after reading the article.

Reply

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *

Related Posts

Interview Questions and Answers for Freshers

Interview Questions and Answers for Freshers

Top 45 IT Interview Questions and Answers for Freshers Going through a job interview, especially as a Freshers IT graduate, can be challenging. However, with right preparation and a clear understanding of common interview questions Read more…

Python Sets

Python Sets

Understanding Python Sets Python, a versatile and powerful programming language, offers a wide range of data structures that make it a favourite among developers. Set is a fundamental data structure used for storing collections of Read more…

Best Programming Language for Developing AI

Best Programming Language for Developing AI

Best Programming Language for Developing AI (Artificial Intelligence) Artificial Intelligence (AI) is changing the way we interact with technology and the world around us. From self-driving cars to virtual personal assistants, AI is powering innovations Read more…