CSS のテキスト属性についてのいくつかのこと Basics_html/css_WEB-ITnose

line-height

要素の単位なしでスケーリング係数を指定できるため、その子孫要素はこのスケーリング係数を継承し、独自のフォントに基づいて独自の行の高さ (line-height) を計算します。 size ) value,

body {  font-size: 12px;  line-height: 1.5;}h1 {  font-size: 36px;}

ここで、body の line-height は 18px (12 * 1.5)、h1 の line-height は 54px (36 * 1.5) です。

em やパーセントなどの相対単位が使用されている場合でも、子孫要素は計算された行の高さの値を継承します。たとえば、上の本文の行の高さが 1.5em に変更された場合、h1 の行の高さは継承されます。はこの値 18px を継承します。

text-decoration

テキスト装飾は非継承クラス属性です。body 要素を none に設定しても、ハイパーリンクなどの子孫内のデフォルトのテキスト装飾を持つ要素には影響しません。そのため、デフォルトの下線を削除したい場合に使用します。

a {  text-decoration: none;}

<p>我有下划线 <span>我咋会有下划线呢?</span></p>

この属性はデフォルトでは継承されませんが、祖先要素に設定された変更は子孫要素にも「拡張」されます、

p {  color: red;  text-decoration: underline;}p span {  color: green;  text-decoration: none;}

p {  color: red;  text-decoration: underline;}p span {  color: green;  text-decoration: underline;}

ここでの下線は の p 要素です。

p {  color: red;  text-decoration: underline;}p span {  color: green;  text-decoration: overline;}

ここでは、span の下線が p の下線をカバーしています。

p {  text-indent: 2em;}

テキスト変更属性の拡張は互換性の問題を引き起こすため、

最良の方法は、それを与えることです変更が必要なテキストは、text-decoration 属性を個別に設定します。

text-indent

スペースを使用する代わりに、この属性を使用して各段落の最初の行を 2 文字インデントすることができます

text-indent: -3em;

ぶら下がった最初の行を作成するために負の値を指定することもできます。効果、

text-indent: -9999px;

引用符をぶら下げておくことも一般的な方法です、

テキストが消えるほど十分にインデントしてください、

.logo {  background: url(logo.png) no-repeat;  display: inline-block;  height: 36px;  text-indent: -9999px;  width: 72px;}

したがって、通常の画像置換テキスト 一般的に使用されるメソッド、

li {  overflow: hidden;  text-overflow: ellipsis;}

IE6/7 は実際には inline-block をサポートしていない場合があります。場合によっては、inline-block の代わりに float または block を使用できますが、どちらもレイアウトを変更します。方法、およびその他の方法を使用することもできます。

text-overflow

通常、URL アドレスの長い文字列はコンテナを超えるとオーバーフローします。テキストがコンテナを超えたときに表示される省略記号を設定できます。 overflow : hidden と連携します。IE 6 などでは幅を追加する必要がある場合があります。デフォルトでオーバーフローしないテキストについては、強制的に 1 行で表示する必要があります。効果を生み出すには、

li {  overflow: hidden;  text-overflow: ellipsis;  <strong>white-space</strong>: <strong>nowrap</strong>;  width: 100%; /* for IE 6 */ }

white-space: pre; または word-break: keep-all; を使用すると、テキストが 1 行に表示されるようになりますが、それぞれに独自の問題があります。

IE 8/9 では、祖先要素の要素に word-wrap:break-word; があり、この属性がwhite-space: nowrap; よりも適切に動作する可能性があります。強力なので、場合によっては次のコードを追加する必要があります。

word-wrap: normal;

text-shadow

白以外の背景に暗いテキストで、美しいインライン効果を実現できます。

text-shadow: 0 1px 0 rgba(255,255,255,.75);

は複数の追加を与えることができますテキストに影をコンマで区切ります。

text-shadow: 0 1px 0 #fff, 0 2px 0 #ddd, 0 3px 0 #ddd, 0 4px 0 #ddd;

white-space

white-space この属性は、要素内の空白を処理する方法を設定します。

値を nowrap に設定すると、テキストが同じ行に続き、
タグに到達するまで境界に遭遇しても折り返されなくなります。

white-space: nowrap;

スペースや改行を保持したい場合があります。たとえば、コンピュータのソースコードを表示する場合、

 が使用されますが、<pre class="brush:php;toolbar:false"> の空白属性の値は、  <p class="sycode"> <pre class='brush:php;toolbar:false;'>pre {  white-space: pre;}

pre では不十分です。境界での自動行折り返しは行われないため、CSS 2.1 では pre-wrap を追加します。

pre {  white-space: pre;  white-space: pre-wrap;}

このようにして、pre 要素内のコンテンツは元の形式を維持し、コンテンツが境界を越えたときに自動的に折り返すことができます。

すべてのブラウザがプリラップをサポートしているわけではないので、改行をサポートしていないブラウザにも強制的に適用する必要があります。その後、水平スクロール バーを使用して行を置き換えることができます。

pre {  white-space: pre;  white-space: pre-wrap;  <strong>word-wrap</strong>:<strong> break-word</strong>;}

word-break

現在、Webkit ファミリ (Google Chrome、Safari、Android ブラウザなどを含む) は keep-all 値をサポートしていません。したがって、使用できるのは、break-all、

pre {  overflow: auto;}

のみです

しかし、これは英語の文章を読みにくくする原因となるため、使用には注意が必要です、

 

word-wrap

这是比 word-break 更好的实现文本换行的方式，

word-wrap: break-word;

再添加一个溢出隐藏，避免一些恶意的连续字符，

overflow: hidden;