ホームページ > 記事 > ウェブフロントエンド > CSS3_html/css_WEB-ITnose の新しいテキスト属性の詳細な説明
CSS3_html/css_WEB-ITnose の新しいテキスト属性の詳細な説明
- WBOYオリジナル
- 2016-06-24 11:26:171402ブラウズ
CSS テキスト属性のレビュー
1. ホワイトスペース: オブジェクト内のスペースの処理方法
2. 方向: テキスト フローの方向
3. 同一の異なる方向からの読み取りに使用されます。ページ 本文が表示されます。方向属性とともに使用されます
1.white-space: オブジェクト内のスペースを処理する方法 nowrap はテキストを折り返さないように制御します
前の空白はブラウザによって保持されます
通常のデフォルト状態
行前の空白はマージされ、改行を保持します
pre-wrap は空白を保持し、通常どおり折り返します
nowrap は、余分な部分が省略記号として表示されるように、テキスト オーバーフローと一緒によく使用されます。次のように、メインのオーバーフローを非表示に設定する必要があります。
効果は下図のとおりです。
p:hover{normal;} というスタイルで追加することもできます。 このようにすると、通常の状態では余分な部分が楕円で表示され、完全なコンテンツが表示されます。 pの上にマウスを置くと が表示されます。
他のいくつかの属性を見てみましょう:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> p{ width: 200px;font-size: 20px; white-space: nowrap;text-overflow: ellipsis;overflow: hidden; } </style></head><body> <p title="被包围在pre元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体"> 被包围在pre元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体</p></body></html> レンダリングは次のとおりです:
要素の内容が範囲を超えない場合、pre と pre-wrap の効果は同じになります。範囲を超えた場合のみです。違いは、Pre は自動的にラップしないことと、要素の境界に事前にラップして自動的にラップすることです。
2. 方向: テキストの流れの方向
左から右への ltr テキスト 右から左への rtl テキスト
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> p{width: 400px;font-size: 18px; background: #CBFF8F;line-height: 36px;} .pre{white-space: pre;/*空白被浏览器保留*/} .pre-line{white-space: pre-line;/*合并空白，保留换行符*/} .pre-wrap{white-space: pre-wrap;/*保留空白，正常换行*/} </style></head><body> <p class="pre"> 在理解this绑定之前， 先要理解调用位置。 我们可以通过浏览器的调试工具来查看调用栈。 在第一行代码钱插入一条debugger;</p> <p class="pre-line"> 在理解this绑定之前， 先要理解调用位置。 我们可以通过浏览器的调试工具来查看调用栈。 在第一行代码钱插入一条debugger;</p> <p class="pre-wrap"> 在理解this绑定之前， 先要理解调用位置。 我们可以通过浏览器的调试工具来查看调用栈。 在第一行代码钱插入一条debugger;</p> <p class="normal"> 在理解this绑定之前， 先要理解调用位置。 我们可以通过浏览器的调试工具来查看调用栈。 在第一行代码钱插入一条debugger;</p></body></html> 効果:
3. unicode-bidi: 異なる方向で同じページに使用されます。というテキストが表示されます。 方向属性
と一緒に使用すると、bidi-override は a173065588d04d2aecc5fdddadbe9411 属性の値に従って厳密に並べ替えられます。暗黙の双方向操作ルールを無視します。 unicode-bidi のデフォルトの属性値は通常です。さらに、CSS3 では、isolate、isolate-override、plaintext という他の属性値が追加されています。
bidi-override の例を示します: (unicode の頻度-bidi 属性がプロジェクトで使用されています (非常に低いです)
効果は次のとおりです:
1. text-overflow: を使用するかどうか。オブジェクト内のテキストのオーバーフローをマークする省略マーク (...) 3. text-align: テキストの配置 4. text-transform: テキストのケース
5. text-decoration: テキストの装飾線、複合属性
6. text-shadow: テキストの影
7. text-fill -color: テキストの塗りつぶしの色
8、text-blood: 複合属性。テキストのストロークを設定します
9、tab-size:タブ文字の長さ
10、word-wrap:指定されたコンテナの境界を越えたときに現在の行を改行するかどうか
1、rgba()
g 緑 緑 0 ～ 255 b 青青 0 ～ 255 a アルファ透明 0 ～ 1
rgba は、以前は不透明度を使用して透明度を設定していましたが、不透明度を使用します。次のように、 rgba はテキストを透明にします:
<html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> p{background: #e3e3e3;padding: 5px; width: 200px;} .left{direction: ltr;} .right{direction: rtl;} </style></head><body> <p class="left">文本流的方向</p> <p class="right">文本流的方向</p> <p>文本流的方向</p></body></html> 効果:
2. text-overflow: オブジェクト内のテキストのオーバーフローをマークするために省略記号 (...) を使用するかどうか
クリップ: デフォルト値は省略記号なしです。
省略記号: オブジェクトが内側のテキストからはみ出した場合に省略記号 (…) を表示します。 注: この属性は、over-flow:hidden 属性 (処理外) およびwhite-space:nowrap (改行を無効にする) と組み合わせて使用する必要があります。そうしないと、効果が表示されません。この部分には例が示されています。先ほどホワイトスペースについて話しました。
3. text-align: テキストの配置
css1
left: デフォルト値の左揃え right: 右揃え center: 中央揃え
justify: コンテンツが両端に揃えられます。
css3
start: 開始境界の配置
end: 終了境界の配置
(テキスト フローの方向に関連し、テキスト フローの方向が右から左の場合、開始が右側、終了が左側になります)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> p{background: #e3e3e3;padding: 5px; width: 200px;} .left{direction: ltr;unicode-bidi: bidi-override;} .right{direction: rtl;unicode-bidi: bidi-override;} </style></head><body> <p class="left">文本流的方向</p> <p class="right">文本流的方向</p></body></html> 4 、 text-transform: text case
css1
none: デフォルト値は変換なし Capitalize: 各単語の最初の文字を大文字に変換 uppercase: 大文字に変換
lowercase: 小文字に変換
css3
全角: 左右の文字を全角に設定します。サポートされていません
全角かな: すべての小さなかな文字を通常のかなに変換します。サポートされていません
例: トルコ語。
これらの属性値の目的は、例を示さずに説明から明確に理解できます
5. text-decoration: テキスト装飾線、複合属性
text-decoration-line: テキスト装飾の種類を指定します。 CSS1 の text-decoration 属性に相当します
none: 指定されたテキストに装飾がありません Underline: 指定されたテキストの装飾が下線です overline: 指定されたテキストの装飾が上線です
line-through: の装飾指定されたテキストはスルーラインです
text -decoration-style: テキストの装飾のスタイルを指定します。
solid:実線
double:二重線
dotted:点線
dashed:点線
wavy:波線
text-decoration-color:文字装飾の色を指定します。
使用法: text-decoration: #F00 二重上線
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> div{font-size: 24px; width: 200px; font-weight: 600; margin: 20px; height: 200px; line-height: 200px;text-align: center;float: left;} .div1{background:rgb(0,146,255); opacity: 0.5;} .div2{background: rgba(0,146,255,0.5);} .img{width:400px;height:300px; background: url(../images/photo2.jpg) center; border: 25px solid rgba(0,0,0,0.6);} </style></head><body> <div class="div1">文本属性</div> <div class="div2">文本属性</div> <div class="img"></div></body></html> 6、text-shadow:文本阴影
取值：x y blur color,……
x 横向偏移
y 纵向偏移
blur 模糊距离(灰度)
color 阴影颜色
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> p{text-align:center;font:50px/50px "微软雅黑";/*字体：字体大小/行高*/} .p1{font-weight:600; text-shadow: 5px 4px 8px #766F5A;} .p2{color:#FFF;text-shadow:2px 3px 4px #000;/**/} .p3{color: #FFF; text-shadow: 0 0 20px #FF79C3, 0 0 30px #71FF5B,0 0 50px #FF0000,0 0 80px #FF0000;} </style></head><body> <p class="p1">文本阴影</p> <p class="p2">浮雕效果</p> <p class="p3">光影效果</p></body></html>
7、text-fill-color:文字填充颜色
兼容性不好，目前仅谷歌支持。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> p{-webkit-text-fill-color:red;font-size:30px;font-weight: 600;} </style></head><body> <p>文字填充颜色</p></body></html>
8、text-stroke:复合属性。设置文字的描边
text-stroke-width:文字的描边厚度
text-stroke-color:文字的描边颜色
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> p{font-size:100px;-webkit-text-fill-color: transparent; -webkit-text-stroke: 2px blue;} </style></head><body> <p>描边属性</p></body></html>
9、tab-size:制表符的长度
默认值为8(一个tab键的空格字节长度)，在pre标签之内才会有显示
10、word-wrap:当前行超过指定容器的边界时是否断开转行
normal： 默认值
允许内容顶开或溢出指定的容器边界。
break-word：
内容将在边界内换行。如果需要，单词内部允许断行。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> p{width:200px;border:2px solid #FF0000;padding: 5px;} .p1{word-wrap: normal} .p2{word-wrap: break-word;} </style></head><body> <p class="p1">Farawayfromme,awayfromharmaaa</p> <p class="p2">Farawayfromme,awayfromharmaaa</p></body></html> 鉴于CSS3的兼容性问题，可以在caniuse网站进行查询，以明确其支持的浏览器版本。
http://caniuse.com/