စကားပြည် စကား

CSS 文本属性可定义文本的外观。

通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

စကားပြည် ပြည်တွင်

把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。

CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。

လုပ်သုံးမှုသမင်း text-indent အကွက်အချင်းကို အသုံးပြု၍ အရာဝတ္တုတိုင်း၏ ပထမလက်ရာကို ချွတ်တဲ့ အတွက် ပေးထားသော အကွက်အချင်းကို ကွင်းပြောင်ကြောင်း။ ပြီးတော့ အကွက်အချင်းအား လျော့ကြောင်း ပြောင်ကြောင်းလည်း ပါသည်။

这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进 5 em：

p {text-indent: 5em;}

注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。

提示：အသုံးပြီးသော အကွက်အား၏ ပထမပုံ ပြည်းတင်ခြင်း ကို ဖြစ်ပေါ်စေရန် အရှေ့ဘက် အဝါးချိန်နှင့် အဖက်ဘက် အဝါးချိန် အသုံးပြီးစေရမည်။

ဝေးသော အကွက်အား သုံးစွဲ

text-indent သည် ဝေးသော အကွက်အား အသုံးပြီးစေရမည်။ အကြောင်းမှာ အချို့သော အကြောင်းအရာများ အဖိုင်အရာ၏ အရှေ့ဘက် အဝါးချိန်အား ချောက်ချောက်ချောက်သွားနိုင်သည်။ ထို့အပြင် အချို့သော အကြောင်းအရာများ အဖိုင်အရာ၏ အရှေ့ဘက် အဝါးချိန်အား ချောက်ချောက်ချောက်သွားနိုင်သည်။

p {text-indent: -5em;}

သို့သော် text-indent သည် ဝေးသော အကွက်အား အသုံးပြီးစေရမည်။ အကြောင်းမှာ အသုံးပြီးသော ပုံနှစ်ပတ် အဖြစ် အသုံးပြီးစေရမည်။ ထို့အပြင် အဖိုင်အရာ၏ အရှေ့ဘက် အဝါးချိန်မှာ အချို့သော အကြောင်းအရာများ အဖိုင်အရာ၏ အရှေ့ဘက် အဝါးချိန်အား ချောက်ချောက်ချောက်သွားနိုင်သည်။ အဆိုပါ ပြင်ဆင်ခြင်း ကို ရှောင်ကြဉ်သည့်အတွက် ဝေးသော ပြည်းတင်ခြင်း အတွက် အဝါးချိန်မှာ အဝါးချိန်များ အသုံးပြီးစေရမည်။

p {text-indent: -5em; padding-left: 5em;}

တိုင်းပေါင်းစား သုံးစွဲ

text-indent သည် အကွက်အား အသုံးပြီးသော အချိန်အတိုင်း အသုံးပြီးသည်။

တိုင်းပေါင်းစား သည် ပြည်းတင်ခြင်း အဖိုင်အရာ၏ အကွက်အား ကိုးကွယ်သည်။ အချို့က ပြည်းတင်ခြင်း 20% ဖြစ်စေ၊ အချို့က ပြည်းတင်ခြင်း အဖိုင်အရာ၏ အကွက်အား 20% ဖြစ်စေ ဖြင့် အချို့သော အကွက်အား ပြည်းတင်ခြင်းကို လုပ်ဆောင်နိုင်သည်။

အောက်ပါ အကြောင်းအရာတွင် ပြည်းတင်ခြင်း သည် အဖိုင်အရာ၏ 20% ဖြစ်၍ 100 ပုံနှစ်ပတ် ဖြစ်သည်:

div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>

သိမ်းဆည်း

text-indent သည် သိမ်းဆည်းနိုင်သည်။ အကြောင်းမှာ အောက်ပါ သတ်ပုံကို သောကြားပါ။

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.</div>
<p>this is a paragragh.</p>
</div>
</div>

အသုံးပြီးသောသတ်ပုံတွင် 50 ပုံနှစ်ပတ် ပြည်းတင်ခြင်းလည်းရှိသည်။ အကြောင်းမှာ အသုံးပြီးသော အကြောင်းအရာ id အဖြစ် inner ဖြစ်သော div အကွက်၏ ပြည်းတင်ခြင်းအရေအတွက်ဖြစ်သည်။

水平对齐

text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。它的前 3 个值相当直接，不过第 4 个和第 5 个则略有些复杂。

值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。

西方语言都是从左向右读，所有 text-align 的默认值是 left。文本在左边界对齐，右边界呈锯齿状（称为“从左到右”文本）。对于希伯来语和阿拉伯语之类的的语言，text-align 则默认为 right，因为这些语言从右向左读。不出所料，center 会使每个文本行在元素中居中。

提示：将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。

text-align:center 与

您可能会认为 text-align:center 与

元素的作用一样，但实际上二者大不相同。

不仅影响文本，还会把整个元素居中。text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响。

justify

最后一个水平对齐属性是 justify。

在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。您也许已经注意到了，两端对齐文本在打印领域很常见。

သတိပြုရမည်ဆိုလျှင်၊ သုံးပုံမှာ အသုံးပြုသူ (သို့မဟုတ် CSS) က အကျယ်အဝန်းတစ်လျှောက်သို့ အဆက်ဆက် ရှိသော အကျယ်အဝန်း အကြားသို့ အဆက်ဆက် အဆက်ဆက် ပြောင်းလဲစေသည်။ အမှန်တကယ် အချက်အလက် သိရှိသင့်သည်။ CSS text-align လက်ဆုံးပြင်。

စကားအကွာအဝေး

word-spacing လက်ဆုံးစကား (စကားလုံး) အကြားသို့ အခြားအကွာအဝေး ပြောင်းလဲစေနိုင်သည်။ မူလအတိုင်း သို့မဟုတ် အဆင်း 0 ကို အတိုင်းအတာ normal အဖြစ် သုံးသည်。

word-spacing လက်ဆုံးကို ပြည့်အထားအတိုင်း သို့မဟုတ် ဝေးအထားအတိုင်း ကို လက်ခံသည်။ ပြည့်အထားအတိုင်း ကို သုံးပါက စကားလုံးအကြားသို့ အကွာအဝေးကို တိုးပွားစေသည်။ word-spacing ကို ဝေးအထားအတိုင်း သုံးပါက စကားလုံးကို အဆင်းတိုးစေသည်：

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
ဒီအစကြောင်းအရာက ပုံပြင်တစ်ခုဖြစ်ပါသည်။ စကားလုံးအကြားသို့ အကွာအဝေးကို တိုးပွားစေသည်。




This is a paragraph. The spaces between words will be decreased.

实例 TIY ：增加或减少单词间距（字间隔）

注释：如需深入理解 CSS 对“字”（word）的定义，请访问 CSS word-spacing အခြေခံ အကိုးအကာ ကို လေ့လာရန်。

အကြောင်းရပ် အကွာ

letter-spacing သည်word-spacing နှင့် အတူ အကြောင်းရပ် ကို ပြုလုပ်ရန် အသုံးပြုပါ၍ လက်မှတ်ပြင် အကြောင်းရပ် ကို ပြုလုပ်ရန် အသုံးပြုပါ။

word-spacing အခြေခံ အကိုးအကာ နှင့် အတူ လက်မှတ်ပြင် အကြောင်းရပ် ကို ပြုလုပ်ရန် အသုံးပြုပါ၊ letter-spacing အခြေခံ အကိုးအကာ သည် အရွယ်အစား အပြန်ပြောင်းလဲရန် အသုံးပြုပါ။ အရွယ်အစား အပြန်ပြောင်းလဲရန် အသုံးပြုပါ။

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>

အမှတ်ပြီး အကြောင်းအရာကို အကြောင်းပြထားပါ

အကြောင်းရပ် ပြောင်းလဲရန်

text-transform သည်text-transform သည် အရွယ်အစား အပြန်ပြောင်းလဲရန် အသုံးပြုပါ၊ ဒီ အခြေခံ အကိုးအကာ ကို အရွယ်အစား အပြန်ပြောင်းလဲရန် အသုံးပြုပါ။ ဒီ အခြေခံ အကိုးအကာ ကို အရွယ်အစား အပြန်ပြောင်းလဲရန် အသုံးပြုပါ။

  • none
  • uppercase
  • lowercase
  • capitalize

မိမိအမည်မျဉ်း none ဖြစ်ပါသည်။ အခြေခံ အကြောင်းအရာကို ပြုပြင်ဘူး။ uppercase နှင့် lowercase ကို အရွယ်အစား အပြန်ပြောင်းလဲရန် အသုံးပြုပါ၊ uppercase သည် အရွယ်အစား အပြန်ပြောင်းလဲသည်၊ lowercase သည် အရွယ်အစား အပြန်ပြောင်းလဲသည်။ ပြီးတော့ capitalize သည် ရုပ်စာအရာ၏ ပထမလက်ရာကို အရွယ်အစား ပြောင်းလဲသည်။

text-transform သည် အခြေခံ အကိုးအကာ တစ်ခု ဖြစ်ပါ၍ အသုံးမပြုဘူး၊ သို့သော် သင် တားမြစ်ချက် များကို ပြင်ဆင်ရန် သို့ အရေးယူခဲ့သည်ကို ရှိသော် အသုံးပြုရန် အလွယ်တကူ ပြုလုပ်နိုင်ပါသည်။ အသုံးပြုရန် အခြေခံ အကိုးအကာ မပြုဘူး၊ သို့သော် text-transform ကို သုံးပြီး ပြင်ဆင်ရန် အလွယ်တကူ ပြုလုပ်နိုင်ပါသည်။

h1 {text-transform: uppercase}

text-transform ကို အသုံးပြုလျှင် နှစ်ခုမျိုးသော အကျိုးကျေးဇူး ရှိပါသည်။ ပထမဆုံး၊ ဒီ ပြုပြင်မှုကို ပြုလုပ်ရန် အကျယ်အဝန်း သီးခြား ရိုက်ထားချက် မပါဘူး၊ h1 အစိတ်အပိုင်းကို ပြင်ဆင်ဘူး။ ဒုတိယဆုံး၊ သူတို့ အနေဖြင့် အရေးယူပြီး အရွယ်အစား အပြန်ပြောင်းလဲရန် အလွယ်တကူ ပြုလုပ်နိုင်ပါသည်။

အမှတ်ပြီး အကြောင်းအရာကို အကြောင်းပြထားပါ

text-decoration

နောက်ပိုင်းတွင် ကျွန်တော်တို့ ဆွေးနွေးပါလိမ့်မယ် text-decoration သည်，这是一个很有意思的属性，它提供了很多非常有趣的行为。

text-decoration 有 5 个值：

  • none
  • underline
  • overline
  • line-through
  • blink

不出所料，underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。

none 值会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但也不总是这样。例如，链接默认地会有下划线。如果您希望去掉超链接的下划线，可以使用以下 CSS 来做到这一点：

a {text-decoration: none;}

注意：如果显式地用这样一个规则去掉链接的下划线，那么锚与正常文本之间在视觉上的唯一差别就是颜色（至少默认是这样的，不过也不能完全保证其颜色肯定有区别）。

还可以在一个规则中结合多种装饰。如果希望所有超链接既有下划线，又有上划线，则规则如下：

a:link a:visited {text-decoration: underline overline;}

不过要注意的是，如果两个不同的装饰都与同一元素匹配，胜出规则的值会完全取代另一个值。请考虑以下的规则：

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

对于给定的规则，所有 class 为 stricken 的 h2 元素都只有一个贯穿线装饰，而没有下划线和上划线，因为 text-decoration 值会替换而不是累积起来。

处理空白符

white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。

通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲，默认的 XHTML 处理已经完成了空白符处理：它会把所有空白符合并为一个空格。所以给定以下标记，它在 Web 浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行：

<p>This     paragraph has    many
    spaces           in it.</p>

အဆိုပါ အချက်အလက်များ ကို ကျယ်ပြည့်အောင် အသုံးပြုလိမ့်မည်

p {white-space: normal;}

အဆိုပါ အချက်အလက်များ ကို ဘရပ်ဆိုက်က ပုံမှန်အတိုင်း အသုံးပြုလိမ့်မည်။ အဆိုပါ အချက်အလက်များ ကို အသုံးပြုသော အချက်အလက်များ ကို ကျော်ကြားလိမ့်မည်။

အမှတ်ပြုချက် TIY : white-space: normal

pre အသုံးပြုလာကြသော အချက်အလက်များ

သို့သော်လည်း အဆိုပါ အချက်အလက်များ ကို အသုံးပြုသော white-space အသုံးပြုသော အချက်အလက်များ ကို အသုံးပြုသော အချက်အလက်များ ကို ကျော်ကြားလိမ့်မည်။

white-space အသုံးပြုသော အချက်အလက်များ အသုံးပြုသော pre အသုံးပြုလာကြသော အချက်အလက်များ ကို အသုံးပြုလာကြသော အချက်အလက်များ ကို ကျော်ကြားလိမ့်မည်။ အဆိုပါ အချက်အလက်များ ကို အသုံးပြုသော အချက်အလက်များ ကို ကျော်ကြားလိမ့်မည်။

အမှတ်ပြုချက် TIY : white-space: pre

注意：အဆိုပါ အချက်အလက်များ ကို အသုံးပြုသော IE 7 နှင့် အရှိန်ဆုံး အသုံးပြုလာကြသော ဘရပ်ဆိုက်များ က အသုံးပြုလိမ့်မည်။

nowrap အသုံးပြုလာကြသော အချက်အလက်များ

အဆိုပါ အချက်အလက်များ ကို အသုံးပြုသော nowrap အသုံးပြုလာကြသော အချက်အလက်များ ကို အသုံးပြုလာကြသော အချက်အလက်များ ကို အစားထိုးလိမ့်မည်။ သို့သော်လည်း အဆိုပါ အချက်အလက်များ ကို အသုံးပြုသော nowrap အသုံးပြုလာကြသော အချက်အလက်များ ကို အစားထိုးလိမ့်မည်။

အမှတ်ပြုချက် TIY : white-space: nowrap

pre-wrap နှင့် pre-line အသုံးပြုလာကြသော အချက်အလက်များ

CSS2.1 တွင် pre-wrap နှင့် pre-line အသုံးပြုလာကြသော အချက်အလက်များ ဖြစ်သည်။ အဆိုပါ အချက်အလက်များ အသုံးပြုလာကြသော အရာတွင် အစားထိုးလာကြသော အချက်အလက်များ ကို ကျော်ကြားလိမ့်မည်။

အဆိုပါ အရာတွင် white-space အသုံးပြုသော pre-wrap အတွက် အသုံးပြုလာကြသော အချက်အလက်များ အပြားအသွား အချက်အလက်များ ကို အစားထိုးလိမ့်မည်။ သို့သော်လည်း အချက်အလက်များ အပြားအသွား အပေါ်တွင် အသုံးပြုလာကြသော အသုံးပြုလာကြသော အချက်အလက်များ ကို ကျော်ကြားလိမ့်မည်။ pre-line အသုံးပြုလာကြသော အဆိုပါ အချက်အလက်များ ကို ပြီးပြည့်စုံအောင် ကျော်ကြားလိမ့်မည်။

实例 TIY ：white-space: pre-wrap

实例 TIY ：white-space: pre-line

注意：我们在 IE7 和 FireFox2.0 浏览器中测试了上面的两个实例，但是结果是，值 pre-wrap 和 pre-line 都没有得到很好的支持。

总结

下面的表格总结了 white-space 属性的行为：

值 空白符 换行符 自动换行
pre-line 合并 保留 允许
normal 合并 忽略 允许
nowrap 合并 忽略 不允许
pre 保留 保留 不允许
pre-wrap 保留 保留 允许

文本方向

如果您阅读的是英文书籍，就会从左到右、从上到下地阅读，这就是英文的流方向。不过，并不是所有语言都如此。我们知道古汉语就是从右到左来阅读的，当然还包括希伯来语和阿拉伯语等等。CSS2 引入了一个属性来描述其方向性。

direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。

注释：对于行内元素，只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。

direction အချက်အလက် အတိုင်း အချက်အလက် နှစ်ခု ရှိသည်: ltr နှင့် rtl နှင့်ဆိုင်၍၊ အများဆုံး အတိုင်း အချက်အလက် ltr ဖြစ်ပြီး အရှေ့မှ အနောက်သို့ ပြောင်းလဲသော စာသောက် ကို ပြသသည်။ အနောက်မှ အရှေ့သို့ ပြောင်းလဲသော စာသောက် ကို သုံးပြီး သုံးသပ်သည်။

CSS စာသောက် အကျိုးအမှု

စာသောက် အရောင် စစ်ဆင်
ဤအကျိုးအမှုမှာ စာသောက် အရောင် စစ်ဆင်ခြင်း ကို ပြသထားသည်。
စာသောက် အစုံ အရောင် စစ်ဆင်
ဤအကျိုးအမှုမှာ ပုံစံ စာသောက် တစ်လျှောက်တွင် အစုံ အရောင် ကို စစ်ဆင်ခြင်း ကို ပြသထားသည်。
စာလုံး အကွာအဝေး အချက်အလက်
ဤအကျိုးအမှုမှာ စာလုံး အကွာအဝေး တိုးပေးခြင်း သို့မဟုတ် လျှော့ခြင်း ကို ပြသထားသည်。
တိုင်းပေါ် အစုံ တုတ်တန်း
ဤအကျိုးအမှုမှာ တိုင်းပေါ် အစုံ အသုံးပြုနိုင်သော တုတ်တန်း အသွား ကို စစ်ဆင်ခြင်း ကို ပြသထားသည်。
တုတ်တန်း အသွား တုတ်တန်း စစ်ဆင်
ဤအကျိုးအမှုမှာ ပမာဏ အသုံးပြုနိုင်သော တုတ်တန်း အသွား ကို စစ်ဆင်ခြင်း ကို ပြသထားသည်。
တုတ်တန်း အသွား စစ်ဆင်
ဤအကျိုးအမှုမှာ စာသောက်တစ်လျှောက်တွင် အသုံးပြုနိုင်သော တုတ်တန်း အသွား ကို စစ်ဆင်ခြင်း ကို ပြသထားသည်。
စာသောက် စီးပွား
ဤအကျိုးအမှုမှာ စာသောက် ကို စီးပွားစေခြင်း ကို ပြသထားသည်。
စာသောက် ကြော်ငြာ
ဤအကျိုးအမှုမှာ စာသောက် ကို ကြော်ငြာခြင်း ကို ပြသထားသည်。
စကားပြည် ပြည်တွင်
ဤအကျိုးအမှုမှာ စာသောက် အစပိုင်း အရိုးစင်းခြင်း ကို ပြသထားသည်。
စာသောက်တွင် အက်စ်လုံး စစ်ဆင်
ဤအကျိုးအမှုမှာ စာသောက်တွင် အက်စ်လုံး ကို စစ်ဆင်ခြင်း ကို ပြသထားသည်。
အက်ဥပက္ခုတွင် စာသောက် ခွဲခြားပေး
ဤအကျိုးအမှုမှာ အက်ဥပက္ခုတွင် စာသောက် ခွဲခြားပေးခြင်း ကို ပြသထားသည်。
စာလုံး အကွာအဝေး တိုးပေး
ဤအကျိုးအမှုမှာ စာသောက်တစ်လျှောက်တွင် စာလုံးအကွာအဝေး တိုးပေးခြင်း ကို ပြသထားသည်。

CSS စာသောက် အချက်အလက်

အချက်အလက် ဖော်ပြ
color စာသောက် အရောင် စစ်ဆင်
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-shadow 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform 控制元素中的字母。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。