سی ایس ایل متن اثر

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 ਵਿਸ਼ੇਸ਼ਤਾ ਲੰਮੇ ਟੈਕਸਟ ਨੂੰ ਟੁੱਟ ਕੇ ਅਗਲੇ ਲਾਈਨ ਵਿੱਚ ਲਿਖ ਸਕਦੀ ਹੈ。

ਜੇਕਰ ਇੱਕ ਸ਼ਬਦ ਬਹੁਤ ਲੰਮਾ ਹੋਵੇ ਅਤੇ ਇੱਕ ਖੇਤਰ ਵਿੱਚ ਸਮਾਯੋਜਿਤ ਨਾ ਹੋ ਸਕਦਾ ਹੈ ਤਾਂ ਉਹ ਬਾਹਰ ਫੈਲ ਸਕਦਾ ਹੈ:

ਇਸ ਪੈਰਾਗ੍ਰਾਫ ਵਿੱਚ ਇੱਕ ਬਹੁਤ ਲੰਮਾ ਸ਼ਬਦ ਹੈ: thisisaveryveryveryveryveryverylongword. ਇਹ ਲੰਮਾ ਸ਼ਬਦ ਟੁੱਟ ਕੇ ਅਗਲੇ ਲਾਈਨ ਵਿੱਚ ਲਿਖਣਗਾ。

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

ਇਸ ਪੈਰਾਗ੍ਰਾਫ ਵਿੱਚ ਇੱਕ ਬਹੁਤ ਲੰਮਾ ਸ਼ਬਦ ਹੈ: thisisaveryveryveryveryveryverylongword. ਇਹ ਲੰਮਾ ਸ਼ਬਦ ਟੁੱਟ ਕੇ ਅਗਲੇ ਲਾਈਨ ਵਿੱਚ ਲਿਖਣਗਾ。

ਸੀਐੱਸਐੱਸ ਕੋਡ ਇਸ ਤਰ੍ਹਾਂ ਹੈ:

ਉਦਾਹਰਣ

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

p {
  word-wrap: break-word;
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

CSS ਲਾਈਨ ਨਿਯਮ

CSS word-break ਸੀਐੱਸਐੱਸ ਲਾਈਨ ਨਿਯਮ

ਵਿਸ਼ੇਸ਼ਤਾ ਲਾਈਨਾਂ ਦੀ ਟੁੱਟਣ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦੀ ਹੈ。

ਇਸ ਪੈਰਾਗ੍ਰਾਫ ਵਿੱਚ ਕੁਝ ਟੈਕਸਟ ਹੈ। ਇਹ ਲਾਈਨ ਹਫ਼ਤਿਆਂ ਉੱਤੇ ਟੁੱਟਣਗੀ。

ਇਸ ਪੈਰਾਗ੍ਰਾਫ ਵਿੱਚ ਕੁਝ ਟੈਕਸਟ ਹੈ। ਇਹ ਲਾਈਨ ਕਿਸੇ ਵੀ ਹਫ਼ਤੇ ਉੱਤੇ ਟੁੱਟਣਗੀ。

ਇਸ ਪੈਰਾਗ੍ਰਾਫ ਵਿੱਚ ਕੁਝ ਟੈਕਸਟ ਹੈ। ਲਾਈਨਾਂ ਕਿਸੇ ਵੀ ਅੱਖਰ ਉੱਤੇ ਟੁੱਟਣਗੀਆਂ。

ਸੀਐੱਸਐੱਸ ਕੋਡ ਇਸ ਤਰ੍ਹਾਂ ਹੈ:

ਉਦਾਹਰਣ

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

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

CSS ਲਿਖਣ ਪ੍ਰਕਾਰ

CSS writing-mode ਵਿਸ਼ੇਸ਼ਤਾ ਟੈਕਸਟ ਦੀ ਲਾਈਨ ਹੋਰਨ ਜਾਂ ਸਿਧੇ ਰੱਖਣ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦੀ ਹੈ。

ਕੁਝ ਟੈਕਸਟ ਨੂੰ span ਇਲੈਕਟ੍ਰੌਨ ਨਾਲ ਸਮੇਤ ਕੀਤਾ ਗਿਆ ਹੈ 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 指定文本行是水平放置还是垂直放置。