ホームページ > 記事 > ウェブフロントエンド > css3テキスト note_html/css_WEB-ITnose
css3テキスト note_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:41:111123ブラウズ
css3 text
CSSのテキスト機能は主にフォント、カラー、テキストの3つのカテゴリーに分かれています。
text-shadow
テキストシャドウを設定します
text-shadow:color x-offset y-offset blur-radius
色: 影の色、オプション。
x-offset: x 軸のオフセット。値が正の場合、影は右側にあり、値が負の場合、影は左側にあります。
y-offset: 値が正の場合、影は下にあり、値が負の場合、影は上にあります。
blur-radius: シャドウのブラー半径 (オプション) は、外側にブラーするシャドウのブラー範囲を表します。
テキストの影をカンマ区切りで複数指定することもできます。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ text-shadow:2px 2px 1px red, 4px 4px 1px yellow, 6px 6px 1px blue, 8px 8px 1px black; }</style></head><body> <div>胸无大志者，必受制于人</div></body></html> text-overflow
テキストオーバーフローを設定します
text-overflow:clip | ellipsis
clip: テキストがオーバーフローしたときにコンテンツをクリップします。
省略記号：テキストがはみ出した場合に省略記号（...）を表示します。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:100px; border:1px solid; text-overflow:clip; }</style></head><body> <div>胸无大志者，必受制于人胸无大志者，必受制于人胸无大志者，必受制于人</div></body></html> テキストオーバーフローを設定するだけでは効果がないことがわかります。自動行折り返しにより、ボックスの高さがコンテンツによって引き伸ばされるため、テキストが折り返されないように強制します（white-space: nowrap）。 ）。そして、オーバーフロー属性を非表示に設定します (overflow:hidden)。
div{ width:100px; border:1px solid; text-overflow:clip; overflow:hidden; white-space:nowrap;} 省略記号効果
div{ width:100px; border:1px solid; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} 最後の文字が省略記号に置き換えられます。
word-wrap
ブラウザが URL アドレスの折り返しを妨げていないことがわかります。word-wrap を使用すると、長い単語と URL アドレスの自動行折り返しが実現します。
word-wrap:normal | break-word
Normal: デフォルト値、ブラウザは半角スペースまたはハイフンでのみ改行します。
break-word: 境界内のコンテンツを分割します。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:100px; border:1px solid; word-wrap:break-word; }</style></head><body> <div>http://www.baidu.com胸无大志者，必受制于人胸无大志者，必受制于人胸无大志者，必受制于人</div></body></html> URLアドレスが境界線の端で強制的に折り返されていることがわかります。
word-break
word-break属性は自動行折り返しの処理方法を決定するために使用します。特定の属性設定により、ブラウザは半角スペースやハイフンの後に改行を実装できるだけでなく、任意の位置で改行を実装することもできます。
word-break:normal | break-all | keep-all
word-break 属性は、オブジェクト内のテキストの単語内分割動作を設定または取得するために使用され、複数の言語の場合に特に便利です。
Normal: ブラウザのデフォルトの行折り返しルールを使用するデフォルト値。
break-all: 単語内での改行を許可します。
Keep-all: 半角スペースまたはハイフンでのみ改行します。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:100px; border:1px solid; word-break:normal; }</style></head><body> <div>https://www.baidu.com胸无大志者，必受制于人胸无大志者，xixihahasuisuiniannian必受制于人胸无大志者，必受制于人</div></body></html> デフォルトでは、URL アドレスと長い単語は自動的に折り返されません。
div{ width:100px; border:1px solid; word-break:break-all; } 値がブレークオールの場合、値がワードブレークの場合、ワードラップと同様の効果があります。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:100px; border:1px solid; word-break:keep-all; }</style></head><body> <div>https://www.baidu.com 胸无大志者，必受制于人 胸无大志者，必受制于人 胸无大志者，必受制于人</div></body></html> 値が keep-all の場合、スペースでのみ改行が行われます。
white-space
要素内の空白文字を処理するために使用されます。
white-spcae:normal || pre || nowrap || pre-line || pre-wrap || inherit
Normal: デフォルト値、空白はブラウザによって無視されます。
前: 空白スペースはブラウザによって保持されます。 HTML の e03b848252eb9375d56be284e690e873 タグのように動作します。
nowrap: テキストは 0c6dc11e160d3b678d68754cc175188a タグに遭遇するまで同じ行に続きます。
pre-wrap: 空白のシーケンスを維持しますが、通常通りにラップします。
Pre-line: 空白文字シーケンスを結合しますが、改行は保持します。
Inherit: 空白属性の値を親要素から継承することを指定します。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:100px; border:1px solid; white-space:normal; }</style></head><body><div>https://www.baidu.com 胸无大志者，必 受制于人 胸无大志者，必受制 于人 胸无大志者，必受制于人</div></body></html> デフォルト（通常）では、空白文字は結合され、復帰は無視され、改行は自動的に折り返されます。
div{ width:100px; border:1px solid; white-space:pre;} 値が pre の場合、空白文字と復帰文字は保持され、自動的に行の折り返しは行われません。
div{ width:100px; border:1px solid; white-space:pre-wrap;} 値が事前に折り返されている場合、空白文字と復帰文字は保持され、新しい行は自動的に折り返されます。
div{ width:100px; border:1px solid; white-space:pre-line;} 値が行前にある場合、空白文字は結合され、復帰は保持され、改行は自動的に行われます。
css3テキストが完成しました。しかし、学びの道はそれだけではありません