How to use white-space CSS property

White space is a CSS property it maintains space as like Javascript trim function. As an example, you have copy paste some content and use your blog post or any web content so required that remove white space. So We use CSS property white-space. White-space property have some value: normal, nowrap, pre, pre-line, pre-wrap.

Code Demo


<style>
.whiteNowrap {
  white-space: nowrap;
  background:#0bf;
  color: #fff;
  padding: 10px;
  width: 200px;
}
.whiteNormal {
  white-space: normal;
  background:#0bf;
  color: #fff;
  padding: 10px;
  width: 200px;
}
.whitePre {
  white-space: pre;
  background:#0bf;
  color: #fff;
  padding: 10px;
  width: 200px;
}
.whitePreLine {
  white-space: pre-line;
  background:#0bf;
  color: #fff;
  padding: 10px;
  width: 200px;
}
.whitePreWrap {
  white-space: pre-wrap;
  background:#0bf;
  color: #fff;
  padding: 10px;
  width: 200px;
}
</style>


<h2>white-space: normal;</h2>
<div class="whiteNormal">
          You can learn anything as HTML, css,
Javascript, jquery, angular,
                  math, php, wordpress etc.
</div>

<h3>white-space: nowrap;</h3>
<div class="whiteNowrap">
          You can learn anything as HTML, css,
Javascript, jquery, angular,
                  math, php, wordpress etc.
</div>

<h3>white-space: pre;</h3>
<div class="whitePre">
          You can learn anything as HTML, css,
Javascript, jquery, angular,
                  math, php, wordpress etc.
</div>

<h3>white-space: pre-line;</h3>
<div class="whitePreLine">
          You can learn anything as HTML, css,
Javascript, jquery, angular,
                  math, php, wordpress etc.
</div>

<h3>white-space: pre-wrap;</h3>
<div class="whitePreWrap">
          You can learn anything as HTML,        css,
Javascript, jquery, angular,
                  math, php, wordpress etc.
</div>

 

No comments:

Note: Only a member of this blog may post a comment.

Copyright Reserved to Anything Learn. Powered by Blogger.