CSS 文本效果

CSS 文本溢出、整字换行、换行规则以及书写模式

在本章中，您将学习如下属性：

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

CSS 文字溢出

CSS text-overflow 属性规定应如何向用户呈现未显示的溢出内容。

可以被裁剪：

ဒါ ဟာ ပေါင်းစား ရိုက်နှာ တွင် ထိန်းသိမ်း လို့ မ နိုင် သော လုံး အရေး စကား ဖြစ်သည်။ ဒါ ဟာ ပေါင်းစား ရိုက်နှာ တွင် ထိန်းသိမ်း လို့ မ နိုင် သော လုံး အရေး စကား ဖြစ်သည်

သို့မဟုတ် အကြမ်းဖြူး အရွယ် (...) ဖြင့် ပြရမည်

ဒါ ဟာ ပေါင်းစား ရိုက်နှာ တွင် ထိန်းသိမ်း လို့ မ နိုင် သော လုံး အရေး စကား ဖြစ်သည်။ ဒါ ဟာ ပေါင်းစား ရိုက်နှာ တွင် ထိန်းသိမ်း လို့ မ နိုင် သော လုံး အရေး စကား ဖြစ်သည်

CSS အချက်အလက် အေျခများစွာ:

အကျိုးများ

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.

CSS အချက်အလက် အေျခများစွာ:

အကျိုးများ

允许长单词被打断并换行到下一行：

p {
  word-wrap: break-word;
}

ကျွန်ုပ်ကိုယ်ဖြင့် ကြိုးစားကြည့်ပါ

CSS 换行规则

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.

CSS အချက်အလက် အေျခများစွာ:

အကျိုးများ

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 ချွတ်သို့ ပုံပေါ် ဖြစ်ပါတယ် သို့မဟုတ် တွင်းပေါ် ဖြစ်ပါတယ် ကို ကြည့်တော်မူပါ