If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
CSS में text spacing का मतलब है , text line & words के बीच spaces को maintain करना। इस topic में आज हम इसी बारे में बात करेंगे। किसी text में space manage करने के लिए कुछ important properties इस प्रकार हैं -
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.
<!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>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.
<!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>line-height property का text line की height define करने के लिए किया जाता है।
p{
line:height:10px;
}
<!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>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.
<!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>white-space property का use text के बीच white spaces को manage करने के लिए किया जाता है।
element{
white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;
}
<!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 के बारे में अच्छे से समझ गए होंगे।