CSS 文本效果

CSS టెక్స్ట్ ముక్తి, పూర్తి అక్షరం పద్ధతి మార్పు, పద్ధతి మార్పు నియమాలు మరియు రచన పద్ధతి

ఈ చాపలో, మీరు ఈ గుణాలను నేర్చుకుంటారు:

  • text-overflow
  • word-wrap
  • word-break
  • writing-mode

CSS పద్ధతి టెక్స్ట్ ముక్తి

CSS text-overflow అన్ని ప్రదర్శించని ముక్తిని వినియోగదారుకు ఎలా ప్రదర్శించాలో పరిశీలించాలి అని ఈ గుణం నిర్ణయిస్తుంది.

క్లాస్‌లో చేర్చని పొడవైన టెక్స్ట్ ఉంది. క్లాస్‌లో చేర్చని పొడవైన టెక్స్ట్ ఉంది

కాబట్టి అర్ధంగంలో ముగించబడిన టెక్స్ట్ ప్రదర్శించవచ్చు (...)

క్లాస్‌లో చేర్చని పొడవైన టెక్స్ట్ ఉంది. క్లాస్‌లో చేర్చని పొడవైన టెక్స్ట్ ఉంది

CSS కోడ్ ఈ కింద ఉంది:

ఉదాహరణ

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

స్వయంగా ప్రయోగించండి

text-overflow: ellipsis;

ఉదాహరణ

ఈ ఉదాహరణలో మౌస్ అందరుగా ఉన్న ప్రదర్శించడానికి ఎలా చేయాలనే చూడండి:
  div.test:hover {
}

స్వయంగా ప్రయోగించండి

overflow: visible;

CSS word-wrap CSS పద బ్రేకింగ్ (Word Wrapping)

లక్షణం దీర్ఘ పాఠాన్ని బ్రేక్ చేసి మరొక పంక్తికి పంపడానికి అనుమతిస్తుంది.

word-wrap లక్షణం ద్వారా, మీరు పాఠాన్ని బ్రేక్ చేయవచ్చు - ఇది పదం మధ్యలో బ్రేక్ చేయడానికి అవకాశం కలిగి ఉంటుంది:

ఒక పదం ఒక క్షేత్రంలో స్థానాన్ని కలిగి ఉండకపోతే, అది బయటకు విస్తరిస్తుంది:

word-wrap లక్షణం ద్వారా, మీరు పాఠాన్ని బ్రేక్ చేయవచ్చు - ఇది పదం మధ్యలో బ్రేక్ చేయడానికి అవకాశం కలిగి ఉంటుంది:

CSS కోడ్ ఈ కింద ఉంది:

ఉదాహరణ

ఈ ప్రార్థన ఒక చాలా దీర్ఘ పదాన్ని కలిగి ఉంది: thisisaveryveryveryveryveryverylongword. దీర్ఘ పదం బ్రేక్ అవుతుంది మరియు మరొక పంక్తికి పంపబడుతుంది.

దీర్ఘ పదాలను బ్రేక్ చేసి మరొక పంక్తికి పంపడానికి అనుమతిస్తుంది:
  p {
}

స్వయంగా ప్రయోగించండి

word-wrap: break-word;

CSS word-break CSS పంక్తుల విధానం

లక్షణం పంక్తుల విధానాన్ని నిర్ణయిస్తుంది.

ఈ ప్రార్థన కొన్ని పాఠం కలిగి ఉంది. ఈ పంక్తి హైఫన్స్ వద్ద బ్రేక్ అవుతుంది:

ఈ ప్రార్థన కొన్ని పాఠం కలిగి ఉంది. ఈ పంక్తి హైఫన్స్ వద్ద బ్రేక్ అవుతుంది:

ఈ ప్రార్థన కొన్ని పాఠం కలిగి ఉంది. పంక్తులు ఏ అక్షరంలోనైనా బ్రేక్ అవుతాయి.

CSS కోడ్ ఈ కింద ఉంది:

ఉదాహరణ

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

స్వయంగా ప్రయోగించండి

CSS లిపి రూపం

CSS writing-mode లక్షణం పాఠ వరుసలను హోరిజంటల్ లేదా వెర్టికల్ ప్రదర్శించాలి నిర్ణయిస్తుంది.

స్పాన్ ఎలమెంట్తో ఉన్న కొన్ని పాఠం తో ఉంటుంది vertical-rl writing-mode.

ఈ ఉదాహరణలో వివిధ లిపి రూపాలను చూడండి:

ఉదాహరణ

p.test1 {
  writing-mode: horizontal-tb; 
}
span.test2 {
  writing-mode: vertical-rl; 
}
p.test2 {
  writing-mode: vertical-rl; 
}

స్వయంగా ప్రయోగించండి

CSS పాఠ ప్రభావ లక్షణాలు

ఈ పట్టిక లో CSS పాఠ ప్రభావ లక్షణాలను పొందించారు:

లక్షణం 描述
text-align-last 指定如何对齐文本的最后一行。
text-justify 指定对齐的文本应如何对齐和间隔。
text-overflow 指定应如何向用户呈现未显示的溢出内容。
word-break 指定非 CJK 脚本的换行规则。
word-wrap 允许长单词被打断并换到下一行。
writing-mode ప్రత్యేక టెక్స్ట్ లైన్ హోరిజంటల్ లేదా వెర్టికల్ గా ఉంచడం