Jassif Team Institution

CSS Text Effects

CSS உரை வழிதல், சொல் மடித்தல், வரி உடைப்பு விதிகள் மற்றும் எழுதும் முறைகளைக் கையாள சில பண்புகளைக் கொண்டுள்ளது.

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

• text-overflow - வழிந்த உள்ளடக்கத்தை எவ்வாறு கையாள வேண்டும் என்பதைக் குறிப்பிடுகிறது
• word-wrap - நீண்ட சொற்களை உடைக்கவும் அடுத்த வரியில் மடிக்கவும் அனுமதிக்கிறது
• word-break - வரி உடைப்பு விதிகளைக் குறிப்பிடுகிறது
• writing-mode - உரை வரிகள் கிடைமட்டமாக அல்லது செங்குத்தாக அமைக்கப்பட்டுள்ளதா என்பதைக் குறிப்பிடுகிறது

CSS text-overflow Property

CSS text-overflow பண்பு காட்சிப்படுத்தப்படாத வழிந்த உள்ளடக்கம் பயனருக்கு எவ்வாறு சமிக்ஞை செய்யப்பட வேண்டும் என்பதைக் குறிப்பிடுகிறது. இது துண்டிக்கப்படலாம் அல்லது நீள்வட்டத்துடன் (...) வழங்கப்படலாம்.

text-overflow செயல்படுவதற்கு பின்வரும் இரு பண்புகளும் தேவைப்படுகின்றன:

• white-space: nowrap;
• overflow: hidden;

p.test1 {
  width: 200px;
  border: 1px solid #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

p.test2 {
  width: 200px;
  border: 1px solid #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

p:hover {
  overflow: visible;
}

CSS word-wrap Property

CSS word-wrap பண்பு நீண்ட சொற்களை உடைக்கவும் அடுத்த வரியில் மடிக்கவும் அனுமதிக்கிறது.

p {
  word-wrap: break-word;
}

CSS word-break Property

CSS word-break பண்பு ஒரு வரியின் முடிவை அடையும் போது சொற்கள் எவ்வாறு உடைக்கப்பட வேண்டும் என்பதைக் குறிப்பிடுகிறது.

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

• normal - இது இயல்புநிலை. மொழியின் இயல்புநிலை வரி உடைப்பு விதிகளைப் பயன்படுத்துகிறது
• break-all - வழிதலைத் தடுக்க எந்த எழுத்திலும் சொற்களை உடைக்க அனுமதிக்கிறது
• keep-all - சொற்களை உடைப்பதைத் தடுக்கிறது

p.test1 {
  word-break: normal;
}

p.test2 {
  word-break: break-all;
}

CSS writing-mode Property

CSS writing-mode பண்பு உரை வரிகள் கிடைமட்டமாக அல்லது செங்குத்தாக அமைக்கப்பட்டுள்ளதா என்பதைக் குறிப்பிடுகிறது.

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

• horizontal-tb - இயல்புநிலை. உரை கிடைமட்டமாக இடமிருந்து வலமாக, செங்குத்தாக மேலிருந்து கீழாக பாய்கிறது
• vertical-rl - உரை செங்குத்தாக மேலிருந்து கீழாக, கிடைமட்டமாக வலமிருந்து இடமாக பாய்கிறது
• vertical-lr - உரை செங்குத்தாக மேலிருந்து கீழாக, கிடைமட்டமாக இடமிருந்து வலமாக பாய்கிறது

p.test1 {
  writing-mode: horizontal-tb;
}

span {
  writing-mode: vertical-rl;
}

p.test2 {
  writing-mode: vertical-rl;
}

Exercise

#example {
  word-wrap: ;
}

CSS Text Effect Properties

பின்வரும் அட்டவணை CSS உரை விளைவு பண்புகளை பட்டியலிடுகிறது: