1.テキストの配置(水平方向)テキストALIGN
このプロパティは、ラベル内のテキストの配置を制御することができるが、また副制御要素とブロックレベル要素の行のアライメント素子列(水平方向)
:これは3つの値があり
、左:左(デフォルト)
センター:揃え
右:右揃え
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
div的文本
<psan>子元素span</psan>
</div>
<div style="text-align:right">
div的文本
<psan>子元素span</psan>
</div>
</body>
</html>
このプロパティのキルト要素が継承します
2.テキストインデントテキストのインデント
ブロックレベル要素のインデントが最初の行の内容を定義し、デフォルト値は0であります
このプロパティは、タグと要素内のテキストの行の行ブロックレベル要素有効です
<!DOCTYPE html>
<html>
<body>
<div>默认文本</div>
<div style="text-indent:50px">缩进50px的文本</div>
<div>
<span>默认的子元素span</span>
</div>
<div style="text-indent:50px">
<span>缩进50px的子元素span</span>
</div>
</body>
</html>
このプロパティは、彼の子要素を継承する(子要素は、ブロックレベル要素内の行がある場合、インデント2)
<div style="text-indent:50px">
<div style="background-color: brown">子元素div的文本</div>
</div>
<div style="text-indent:50px">
<span style="background-color: brown;display: inline-block;">子元素(行内块级元素)的文本</span>
</div>
3.テキスト変更されたテキストの装飾
このプロパティに指定できる値は次のとおりです:
デフォルトではなし。テキスト定義された基準。
下線テキストで定義された行。
ラインはオーバーラインのテキストに定義されています。
ラインを通る線は、テキストで定義されています。
<div>默认无修饰</div>
<div style="text-decoration: underline">underline 下划线</div>
<div style="text-decoration: overline">overline 上划线</div>
<div style="text-decoration: line-through">line-through 删除线</div>
<div style="text-decoration: blink">blink</div>
4.文字や単語間隔文字間隔/ワード間隔
文字間隔制御部材は(文字を含む)、単一の文字ピッチで、単語の間隔は間隔制御ワード(漢字無効)です
<div>this is a good day(默认)</div>
<div style="letter-spacing: 10px;">this is a good day</div>
<div style="letter-spacing: 10px;">你好世界</div>
<div style="word-spacing: 10px;">this is a good day</div>
<div style="word-spacing: 10px;">你好世界</div>
テキスト配向方向
:2つの方向の値があります
LTRのデフォルトが。テキストの方向が左から右へ。
右から左へのRTLテキスト方向。
ただし、このプロパティは、テキストの方向を指すものではありませんが、時にはそれは、テキスト整列に似ています
<div>你好世界(默认)</div>
<div style="direction:rtl">direction:rtl</div>
<div style="text-align: right;">text-align: right</div>
それは厳密にサブ要素間の順序に制御される(もちろん、これらのサブエレメントは、ブロックレベル要素であることができます)
<!DOCTYPE html>
<html>
<body>
<div>你好世界(默认)</div>
<div style="direction:rtl">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div style="text-align: right;">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
ケース6コントロールのテキスト属性のテキスト変換
テキスト-transformプロパティには4つの値があります。
デフォルトでは何もありません。小文字と大文字の規格で定義されたテキスト。
大文字の単語の最初の文字を大文字
すべて大文字を大文字。
小文字すべて小文字。
<div>hello world</div>
<div style="text-transform: capitalize">hello world</div>
<div style="text-transform: uppercase">hello world</div>
<div style="text-transform: lowercase">hello world</div>
7.取扱いおよびラップテキスト空白スペース
空白文字は、ラップかどうかを制御しながら、空白のコントロールを表示します
ホワイトスペースは、次の値があります。
通常:連続した空白をマージ、改行文字が空白で、改行を超えたコンテナ
前:ホワイトスペースは、ブラウザを予約されています。HTMLの<pre>タグと同様に、その行動。コンテナを越えて折り返されません。
NOWRAP:マージの連続空白、改行文字は空白であり、ラップコンテナを超えません
前のラップ:空白文字列が、通常のラインフィード。
前行:空白文字列を連結しますが、改行を保持します。