CSSのテキスト操作

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:マージの連続空白、改行文字は空白であり、ラップコンテナを超えません

前のラップ:空白文字列が、通常のラインフィード。

前行:空白文字列を連結しますが、改行を保持します。

おすすめ

転載: www.cnblogs.com/OrochiZ-/p/11567122.html