CSS Text Spacing In Hindi

📔 : CSS 🔗

CSS में text spacing का मतलब है , text line & words के बीच spaces को maintain करना। इस topic में आज हम इसी बारे में बात करेंगे। किसी text में space manage करने के लिए कुछ important properties इस प्रकार हैं -

  • text-indent
  • letter-spacing
  • line-height
  • word-spacing
  • white-space

CSS text-indent

text-indent property का use किसी text की first line की indent define करने के लिए किया जाता है , मतलब text की first कितनी दूसरी से start होगी।

p{
  text-indent : 40px;
}

Contrary to popular belief, Lorem Ipsum is not simply random text.
It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.

CSS text-indent example

CopyFullscreenClose FullscreenRun
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS text-indent example</title>
  </head>
  <body>
  	<p style="text-indent:60px;">There are many variations of passages of Lorem Ipsum available,<br/> but the majority have suffered alteration in some form,<br/>by injected humour, or randomised words which don't look</br> even slightly believable.</p>
  </body>
</html>

CSS letter-spacing

letter-spacing property का use characters के बीच में space define करने के लिए किया जाता है।

p{
  letter-spacing : 5px;
}

This is simple letter-spacing example.

Another letter-spacing example.

Another one letter-spacing example.

Another one letter-spacing example.

CSS letter-spacing example

CopyFullscreenClose FullscreenRun
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS letter-spacing example</title>
  </head>
  <body>
  	<p style="letter-spacing:5px;">This is simple letter-spacing example.</p>
    <p style="letter-spacing:10px;">Another letter-spacing example.</p>
    <p style="letter-spacing:2px;">Another one letter-spacing example.</p>
    <p style="letter-spacing:1px;">Another one letter-spacing example.</p>
  </body>
</html>

CSS line-height

line-height property का text line की height define करने के लिए किया जाता है।

p{
  line:height:10px;
}

CSS line-height example

CopyFullscreenClose FullscreenRun
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS line-height example</title>
    <style>
      #p1{
        line-height : 15px;
	    }
      #p2{
        line-height : 25px;
	    }
      #p3{
        line-height : 40px;
	    }
    </style>
  </head>
  <body>
    <h3>line-height : 10px;</h3>
    <p id="p1">There are many variations of passages of Lorem Ipsum available, <br/>but the majority have suffered alteration in some form, by injected humour, <br/>or randomised words which don't look even slightly believable.</p>
    <h3>line-height : 20px;</h3>
    <p id="p2">There are many variations of passages of Lorem Ipsum available, <br/>but the majority have suffered alteration in some form, by injected humour, <br/>or randomised words which don't look even slightly believable.</p>
    <h3>line-height : 30px;</h3>
    <p id="p3">There are many variations of passages of Lorem Ipsum available, <br/>but the majority have suffered alteration in some form, by injected humour, <br/>or randomised words which don't look even slightly believable.</p>
  </body>
</html>

CSS word-spacing

word-spacing property का text के हर word के बीच space define करने के लिए किया जाता है।

p{
  word-spacing : 5px;
}

This is simple word-spacing example.

Another word-spacing example.

Another one word-spacing example.

Another one word-spacing example.

CSS word-spacing example

CopyFullscreenClose FullscreenRun
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS word-spacing example</title>
  </head>
  <body>
  	<p style="word-spacing:1px;">This is simple word-spacing example.</p>
    <p style="word-spacing:10px;">Another word-spacing example.</p>
    <p style="word-spacing:20px;">Another one word-spacing example.</p>
    <p style="word-spacing:40px;">Another one word-spacing example.</p>
  </body>
</html>

CSS white-space

white-space property का use text के बीच white spaces को manage करने के लिए किया जाता है।

element{
  white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;
}

CSS word-spacing example

CopyFullscreenClose FullscreenRun
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS white-space example</title>
  </head>
  <body>
    <h3>white-space:normal;</h3>
  	<p style="white-space:normal;">There are many variations of passages of Lorem Ipsum available,                       but the majority have suffered alteration in some form, 
      by injected humour,                             or randomised words which don't look even slightly believable.</p>
    
    <h3>white-space:nowrap;</h3>
    <p style="white-space:nowrap">There are many variations of passages of Lorem Ipsum available,                       but the majority have suffered alteration in some form, 
      by injected humour,                             or randomised words which don't look even slightly believable.</p>
  	
    <h3>white-space:pre;</h3>
    <p style="white-space:pre">There are many variations of passages of Lorem Ipsum available,                       but the majority have suffered alteration in some form, 
      by injected humour,                             or randomised words which don't look even slightly believable.</p>
  	
    <h3>white-space:pre-line;</h3>
    <p style="white-space:pre-line">There are many variations of passages of Lorem Ipsum available,                       but the majority have suffered alteration in some form, 
      by injected humour,                             or randomised words which don't look even slightly believable.</p>
  	
    <h3>white-space:pre-wrap;</h3>
    <p style="white-space:pre-wrap">There are many variations of passages of Lorem Ipsum available,                       but the majority have suffered alteration in some form, 
      by injected humour,                             or randomised words which don't look even slightly believable.</p>
    <h3>white-space:inital;</h3>
    <p style="white-space:initial">There are many variations of passages of Lorem Ipsum available,                       but the majority have suffered alteration in some form, 
      by injected humour,                             or randomised words which don't look even slightly believable.</p>
  </body>
</html>

I Hope, अब आप text spacing के बारे में अच्छे से समझ गए होंगे।

Related Topics :

Rahul Kumar

Rahul Kumar

Hi ! I'm Rahul Kumar Rajput founder of learnhindituts.com. I'm a software developer having more than 4 years of experience. I love to talk about programming as well as writing technical tutorials and blogs that can help to others. I'm here to help you navigate the coding cosmos and turn your ideas into reality, keep coding, keep learning :)

Get connected with me. :) LinkedIn Twitter Instagram Facebook

b2eprogrammers