CSS متن اثر

CSS ਟੈਕਸਟ ਵਿਸਫੋਟ, ਸਮੂਹਿਕ ਲਿਨੇਜ਼, ਲਾਈਨ ਰੂਲਸ ਅਤੇ ਲਿਖਣ ਮੋਡ

ਇਸ ਚਾਪਚੇ ਵਿੱਚ ਤੁਸੀਂ ਹੇਠ ਲਿਖੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਸਿੱਖੋਗੇ:

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

CSS ਟੈਕਸਟ ਵਿਸਫੋਟ

CSS text-overflow ਇਹ ਪ੍ਰਤੀਭਾਵ ਇਹ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ ਕਿ ਕਿਵੇਂ ਬਿਨਾਂ ਦਿਖਾਏ ਹੋਏ ਵਿਸਫੋਟ ਕਿਸਮ ਦੇ ਸਮੱਗਰੀ ਨੂੰ ਉਪਭੋਗਤਾ ਨੂੰ ਦਿਖਾਇਆ ਜਾਵੇ।

ਕਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ:

ਇਹ ਕੁਝ ਹੈ ਜੋ ਫਲਾਕਸ ਵਿੱਚ ਰੱਖਿਆ ਨਹੀਂ ਜਾ ਸਕਦਾ। ਇਹ ਕੁਝ ਹੈ ਜੋ ਫਲਾਕਸ ਵਿੱਚ ਰੱਖਿਆ ਨਹੀਂ ਜਾ ਸਕਦਾ

ਇਸ ਨੂੰ ਨਾਬਾਲਾ (...)

ਇਹ ਕੁਝ ਹੈ ਜੋ ਫਲਾਕਸ ਵਿੱਚ ਰੱਖਿਆ ਨਹੀਂ ਜਾ ਸਕਦਾ। ਇਹ ਕੁਝ ਹੈ ਜੋ ਫਲਾਕਸ ਵਿੱਚ ਰੱਖਿਆ ਨਹੀਂ ਜਾ ਸਕਦਾ

ਸੀਐੱਸਐੱਸ ਕੋਡ ਨਿਮਨਲਿਖਤ ਹੈ:

ਉਦਾਹਰਣ

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

ਆਪਣੇ ਅਨੁਭਵ ਦੇਖੋ

ਹੇਠ ਦੇ ਉਦਾਹਰਣ ਵਿੱਚ ਮਾਉਸ ਨੂੰ ਇਲੈਕਟ੍ਰੌਨਿਕ ਇਕਾਈ ਉੱਤੇ ਲਗਾਉਣ ਨਾਲ ਬਾਹਰੀ ਸਮੱਗਰੀ ਦਿਸ਼ਾ ਦਿੱਤੀ ਗਈ ਹੈ:

ਉਦਾਹਰਣ

div.test:hover {
  overflow: visible;
}

ਆਪਣੇ ਅਨੁਭਵ ਦੇਖੋ

CSS ਲਿਖਣ (Word Wrapping)

CSS word-wrap ਵਿਸ਼ੇਸ਼ਤਾ ਲੰਮੇ ਟੈਕਸਟ ਨੂੰ ਟੁੱਟ ਕੇ ਅਗਲੇ ਲਾਈਨ ਵਿੱਚ ਲਿਖ ਸਕਦੀ ਹੈ。

ਜੇਕਰ ਇੱਕ ਸ਼ਬਦ ਇੱਕ ਖੇਤਰ ਵਿੱਚ ਰੱਖਣ ਲਈ ਬਹੁਤ ਲੰਮਾ ਹੈ ਤਾਂ ਉਹ ਬਾਹਰ ਵਧੇਗਾ:

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

word-wrap ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਦੁਆਰਾ ਤੁਸੀਂ ਟੈਕਸਟ ਨੂੰ ਮਜ਼ਬੂਰੀ ਨਾਲ ਟੁੱਟ ਕੇ ਲਿਖ ਸਕਦੇ ਹੋ - ਭਾਵੇਂ ਇਹ ਸ਼ਬਦ ਦੇ ਮੱਧ ਵਿੱਚ ਟੁੱਟਣਾ ਹੋਵੇ:

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

ਸੀਐੱਸਐੱਸ ਕੋਡ ਨਿਮਨਲਿਖਤ ਹੈ:

ਉਦਾਹਰਣ

ਲੰਮੇ ਸ਼ਬਦਾਂ ਨੂੰ ਟੁੱਟ ਕੇ ਅਗਲੇ ਲਾਈਨ ਵਿੱਚ ਲਿਖਣ ਦੀ ਇਜਾਜਤ ਦਿੰਦੀ ਹੈ:

p {
  word-wrap: break-word;
}

ਆਪਣੇ ਅਨੁਭਵ ਦੇਖੋ

ਸੀਐੱਸਐੱਸ ਲਿਖਣ ਪ੍ਰਕਾਰ ਨਿਯਮ

CSS word-break ਵਿਸ਼ੇਸ਼ਤਾ ਨਿਰਧਾਰਿਤ ਕਰਦੀ ਹੈ ਕਿ ਲਿਖਣ ਵਿੱਚ ਟੈਕਸਟ ਨੂੰ ਕਿਵੇਂ ਟੁੱਟਣਾ ਹੈ:

ਇਸ ਪੈਰਾਗ੍ਰਾਫ ਵਿੱਚ ਕੁਝ ਟੈਕਸਟ ਹੈ। ਇਹ ਪਰਿਭਾਸ਼ਤ ਹਰ ਹਫ਼ਤੇ ਉੱਤੇ ਟੈਕਸਟ ਨੂੰ ਟੁੱਟ ਦੇਵੇਗਾ:

This paragraph contains some text. This line will-break-at-hyphens.

ਇਸ ਪੈਰਾਗ੍ਰਾਫ ਵਿੱਚ ਕੁਝ ਟੈਕਸਟ ਹੈ। ਇਹ ਪਰਿਭਾਸ਼ਤ ਹਰ ਸ਼ਬਦ ਉੱਤੇ ਟੈਕਸਟ ਨੂੰ ਟੁੱਟ ਦੇਵੇਗਾ:

This paragraph contains some text. The lines will break at any character.

ਸੀਐੱਸਐੱਸ ਕੋਡ ਨਿਮਨਲਿਖਤ ਹੈ:

ਉਦਾਹਰਣ

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

ਆਪਣੇ ਅਨੁਭਵ ਦੇਖੋ

CSS ਲਿਖਣ ਪ੍ਰਕਾਰ

CSS writing-mode ਵਿਸ਼ੇਸ਼ਤਾ ਨਿਰਧਾਰਿਤ ਕਰਦੀ ਹੈ ਕਿ ਟੈਕਸਟ ਦੀ ਰੈਂਡਰਿੰਗ ਪਰਿਭਾਸ਼ਤ ਹੈ ਜਾਂ ਸਿਰਫ਼ ਪਰਿਭਾਸ਼ਤ ਹੈ:

Some text with a span element with a vertical-rl writing-mode.

ਹੇਠ ਦੇ ਉਦਾਹਰਣ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਲਿਖਣ ਪ੍ਰਕਾਰਾਂ ਦਿਸ਼ਾ ਦਿੱਤੀ ਗਈ ਹੈ:

ਉਦਾਹਰਣ

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

ਆਪਣੇ ਅਨੁਭਵ ਦੇਖੋ

ਸੀਐੱਸਐੱਸ ਟੈਕਸਟ ਇਫੈਕਟ ਵਿਸ਼ੇਸ਼ਤਾ

ਹੇਠ ਸਾਰੀ ਟੇਬਲ ਸੀਐੱਸਐੱਸ ਟੈਕਸਟ ਇਫੈਕਟ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੇ ਸਾਰ ਦਿੰਦੀ ਹੈ:

ਵਿਸ਼ੇਸ਼ਤਾ 描述
text-align-last 指定如何对齐文本的最后一行。
text-justify 指定对齐的文本应如何对齐和间隔。
text-overflow 指定应如何向用户呈现未显示的溢出内容。
word-break 指定非 CJK 脚本的换行规则。
word-wrap 允许长单词被打断并换到下一行。
writing-mode 指定文本行是水平放置还是垂直放置。