Jassif Team Institution

CSS Text Spacing

CSS-க்கு உரை இடைவெளியை கட்டுப்படுத்த பல பண்புகள் உள்ளன.

இந்த அத்தியாயத்தில் நீங்கள் பின்வரும் பண்புகளைப் பற்றி கற்றுக்கொள்வீர்கள்:

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

CSS Text Indentation

CSS text-indent பண்பு ஒரு உரை-தொகுதியில் முதல் வரியின் உள்தள்ளலை குறிப்பிட பயன்படுகிறது.

எடுத்துக்காட்டு

ஒரு உரை-தொகுதியில் உரையின் முதல் வரியை உள்தள்ளவும்:

p {
  text-indent: 50px;
}

CSS Letter Spacing

CSS letter-spacing பண்பு உரையில் உள்ள எழுத்துக்களுக்கு இடையே உள்ள இடத்தை குறிப்பிட பயன்படுகிறது.

எடுத்துக்காட்டு

எழுத்துக்களுக்கு இடையே உள்ள இடத்தை அதிகரிக்கவும் குறைக்கவும்:

h1 {
  letter-spacing: 5px;
}

h2 {
  letter-spacing: -2px;
}

CSS Line Height

CSS line-height பண்பு வரிகளுக்கு இடையே உள்ள இடத்தை குறிப்பிட பயன்படுகிறது.

எடுத்துக்காட்டு

வரிகளுக்கு இடையே உள்ள இடத்தை குறிப்பிடவும்:

p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}

CSS Word Spacing

CSS word-spacing பண்பு உரையில் உள்ள வார்த்தைகளுக்கு இடையே உள்ள இடத்தை குறிப்பிட பயன்படுகிறது.

எடுத்துக்காட்டு

வார்த்தைகளுக்கு இடையே உள்ள இடத்தை அதிகரிக்கவும் குறைக்கவும்:

p.one {
  word-spacing: 10px;
}

p.two {
  word-spacing: -2px;
}

CSS White Space

CSS white-space பண்பு ஒரு உறுப்புக்குள் white-space எவ்வாறு கையாளப்படுகிறது என்பதை குறிப்பிடுகிறது.

இந்த பண்பு பின்வரும் மதிப்புகளில் ஒன்றைக் கொண்டிருக்கலாம்:

• normal
• nowrap
• pre
• pre-line
• pre-wrap

எடுத்துக்காட்டு

ஒரு உறுப்புக்குள் உரை மடிப்பதை எவ்வாறு முடக்குவது

p {
  white-space: nowrap;
}

CSS Text Spacing பயிற்சி

இந்த டுடோரியலில் உள்ள பல அத்தியாயங்கள் உங்கள் அறிவு நிலையைச் சரிபார்க்கக்கூடிய பயிற்சியுடன் முடிகின்றன.

h1 {
  : 5px;
}

CSS Text Spacing பண்புகள்