Mafaa ya Matukio ya CSS

CSS Kifupi cha Matukio ya Matukio, Ushirikiano wa Kifupi, Sheria za Ushirikiano na Ushirikiano wa Mabomu

Kwenye kitengo hiki, utafundisha vitu vya kufikia kama vile:

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

CSS Kifupi cha Matukio ya Matukio

CSS text-overflow Mafupi ya kifupi inasababisha uwezo wa kumfanikisha kwa mtumishi zawa kwa matukio ya kufikia.

Inaweza kufikia:

Hiiyo ni mawili ya matukio ambayo hayakuchukuliwa kwenye mfumo wa kufikia.

Inaweza kuonesha kama makosemo (...):

Hiiyo ni mawili ya matukio ambayo hayakuchukuliwa kwenye mfumo wa kufikia.

Maktaba ya CSS ya hii inayofanyika:

mifano

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; 
}

Tenda tena

Mifano hii inaonyesha jinsi ya kuonyesha matukio ya kubaki kama kusikitisha kwenye kina:

mifano

div.test:hover {
  overflow: visible;
}

Tenda tena

CSS uandikaji wa neno (Word Wrapping)

CSS word-wrap Kipimo cha uandikaji kinachofanya matukio ya mawanda ya mawanda inaweza kufichia na kushambulia kwenye mabara ya hivi karibuni.

Hili neno hauwezi kufikia eneo kwa sababu ni mchanganyiko kwa heri, itakushambulia nje ya eneo:

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

Kwa kutumia kipimo cha word-wrap, unaweza kumfanya mawanda wa mawanda wakuelekea mabara - inafaa inaonyesha inaongezwa kwa kufichia nje ya heri:

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

Maktaba ya CSS ya hii inayofanyika:

mifano

Inaruhusiwa kufichia neno nje ya mabara na kuweka kwenye mabara ya hivi karibuni:

p {
  word-wrap: break-word;
}

Tenda tena

Kipimo cha kufichia cha CSS

CSS word-break Kipimo cha kufichia inaeleza inaonyesha ya mawanda kuelekea mabara kwa kufichia:

Maktaba hii inaonekana kuna matukio. Hayo mawanda yatakataa katika chuki kwa heri:

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

Maktaba hii inaonekana kuna matukio. Hayo mawanda yatakataa katika chuki kwa kila heri.

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

Maktaba ya CSS ya hii inayofanyika:

mifano

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

Tenda tena

Uandikaji wa CSS

CSS writing-mode Kipimo cha uandikaji kinaeleza inaonyesha ya mawanda kuelekea mabara kama ni miringu au mbali:

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

Mifano yaliyotazama hapa inaonyesha aina mbalimbali za uandikaji:

mifano

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

Tenda tena

kipimo cha mawanda wa CSS wa mawanda

Tafutaji hii inaonyesha kipimo cha mawili ya CSS ya mawanda:

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