CSS text_html/css_WEB-ITnose

目次

[1] 文字の影 [2] 1 行目のインデント [3] 水平方向の配置 [4] 垂直方向の配置 [5] 単語の間隔 [6] 文字の間隔 [7] テキストの変換 [8] テキストの変更[ 9] ホワイトスペース [10] テキストの折り返し [11] テキストのオーバーフロー [12] テキストの方向

テキストのシャドウ (IE8 はサポートされていません)

text-shadow:none(默认)text-shadow:[颜色color] x轴位移(x-offset) y轴位移(y-offset) 模糊半径(blur-radius),*

[注] シャドウのレイヤーを追加しすぎないでください。パフォーマンスの問題

б [テキストシャドウコードビュー]

[注] Text-indent はブロックレベルでのみ使用できます要素を継承できます

[サスペンションインデント] 【ドロップキャップ】

text-indent:0(默认值)text-indent:具体值(可以为负值)text-indent:x%(相对于包含块的宽度)text-indent:2em(2个汉字的字体大小)

水平配置

div{    width: 200px;    border: 1px solid black;    text-indent: -1em;//关键代码    padding-left: 1em;//关键代码}

[注] text-align はブロックレベルの要素にのみ適用され、継承可能です

<style>div{    width: 200px;    border: 1px solid black;    text-indent: 0.5em;}div:first-letter{    font-size: 30px;    float: left;}  

Vertical Alイグメント

【 1】 行の高さ
line-height 属性は、テキスト行のベースライン間の距離を指します

行間隔 = line-height - font-size

text-align: left(左对齐)text-align: right(右对齐)text-align: center(居中对齐)text-align: justify(两端对齐)(IE浏览器无效)

【注意】行の高さはどの要素にも適用されます継承可能です

【 2】テキストを縦に揃えます

div:nth-child(1){text-align: left;}div:nth-child(2){text-align: right;}div:nth-child(3){text-align: center;}div:nth-child(4){text-align: justify;}

【注意】vertical-align は inline 要素と置換要素にのみ使用され、継承できません

Word spacing (単語間隔)

line-height: normal;(默认) line-height: 100%/1em/16px;(%相对于元素的字体大小)line-height: 1;(1表示缩放因子，相对于当前元素的字体大小)

[注] 単語間はスペースで区切ります。単語間の間隔 = 単語間隔 + スペースサイズ

文字間隔 (文字間隔)

vertical-align:baseline(基线对齐)vertical-align:sub(下标)vertical-align:super(上标)vertical-align:bottom(底端)vertical-align:text-bottom(文本底端)vertical-align:top(顶端)vertical-align:text-top(文本顶端)vertical-align:middle(居中)vertical-align:(+-n)px(元素相对于基线上下偏移npx)vertical-align:x%(相对于元素的line-height值)

[注] 単語間隔と文字間隔の両方すべての要素に使用でき、継承できます

Text Transform

word-spacing:normal(默认normal=0)word-spacing:具体值(可为负值)

ただし、継承はありません

空白文字 (IE7 は以前の文字をサポートしていません) -wrap と pre-line)

空白文字はスペース、タブ、キャリッジリターンを指します; HTML はデフォルトですべての空白文字を 1 つのスペースにマージします

letter-spacing: normal(默认normal=0)letter-spacing: 具体值(可为负值)

[注] 空白はすべての要素に使用できます、ただし継承可能ではありません

text-transform:none(默认)text-transform:uppercase(全大写)text-transform:lowercase(全小写)text-transform:capitalize(首字母大写)

Text Wrapping

text-decoration: none(默认，无修饰)text-decoration: overline(上划线)text-decoration: line-through(中划线或删除线)text-decoration: underline(下划线)

Text overflow

white-space:normal;(默认)white-space:pre;(保留空白符,且防止文本换行)white-space:nowrap;(防止文本换行)white-space:pre-wrap;(保留空白符，文本正常换行)white-space:pre-line;(合并空白符，但保留换行符)

【よく使われるテキストオーバーフローコード】

<div>They can stay 72-hours     within the Shandong      province after they have entered China via the Qingdao International Airport.</div>

テキスト方向 (IE8 ではありません)サポートされています)

rree