CSS White Space and CSS Line Height with Examples.
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-
- Learn about Internet. Is Internet really Free?
- Learn about Mobile and disease caused by Mobile.
- Learn HTML Form full tutorial with example.
- Learn HTML Table full tutorial with example.
- Learn how to create CSS Animation.
Â
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.
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.
Classie Widger · January 16, 2023 at 7:23 am
I regard something truly special in this website .
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.