テキスト オーバーフロー text-overflow とテキスト シャドウ text-shadow_html/css_WEB-ITnose

× 目次 [1] テキスト オーバーフロー [2] テキスト シャドウ

前の単語

CSS3 ではテキストの新しいスタイルがいくつか追加されましたが、その中で text-overflow テキスト オーバーフローと text-shadow テキスト シャドウはやや特殊です。対応するオーバーフロー オーバーフロー プロパティとボックス シャドウ ボックス シャドウ プロパティがあるためです。この記事では、テキストに対するこれら 2 つの効果のオーバーフローとシャドウのプロパティを詳しく紹介します

テキスト オーバーフロー

一般に、テキスト オーバーフローについて言及するとき、テキスト オーバーフローの古典的なコードを思い浮かべます

white-space: nowrap;overflow: hidden;text-overflow: ellipsis;

しかし、実際には、テキストの折り返しには必ずしも空白を使用する必要はありません。オーバーフロー属性値には必ずしも隠し文字を使用する必要はありません。

定義

text-overflow

値：clip | ellipsis

初期値：clip

適用対象：ブロックレベル要素、置換要素、表セル

継承：なし

clip: 不显示省略标记(...)，只是简单的裁切，相当于无效果ellipsis: 文本溢出时显示省略标记(...)，省略标记插入的位置是最后一个字符

[注意] テキストオーバーフロー属性がテーブルセルに適用される場合、table-layout:fixed

を設定する必要があります 【注意】この属性は互換性が高く、IE6以降の主流ブラウザとモバイル端末のisoおよびandroid

実装

【1】英語の長文の場合、text-overflow属性が機能する前提は

overflow(或overflow-y或overflow-x):hidden | auto | scroll

【2】テキストが漢字の場合、text-overflow属性が機能する前提は

实现汉字不自动换行可使用word-break: keep-all; 或 white-space: nowrap;overflow(或overflow-y或overflow-x):hidden | auto | scroll

テキストシャドウ

ボックスシャドウと同様に、テキストシャドウにもx軸オフセット、y軸オフセット、ぼかし半径、シャドウカラーの4つの値がありますが、2つの値はありません。影のサイズと内側の影の

定義

text-shadow

値: none | (h-shadow v-shadow Blur color)+

初期値: none

適用対象: すべての要素

継承:なし

h-shadow: 水平阴影位置(必须)v-shadow: 垂直阴影位置(必须)blur:     模糊距离(该值不能为负值，可选)color:    阴影颜色，默认和文本颜色一致(可选) 

[Note] この属性 IE9-browser は

//多层阴影text-shadow: 1px 1px blue,5px 5px 5px red;

[Note] 影のレイヤーを追加しすぎないでください、パフォーマンスの問題が発生します

共通の効果

[テキストシャドウコードを表示]