css3テキスト note_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

css3テキスト note_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:41 AM

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 の

 タグのように動作します。 <br> nowrap: テキストは <br> タグに遭遇するまで同じ行に続きます。 <br> pre-wrap: 空白のシーケンスを維持しますが、通常通りにラップします。 <br> Pre-line: 空白文字シーケンスを結合しますが、改行は保持します。 <br> Inherit: 空白属性の値を親要素から継承することを指定します。  <pre class='brush:php;toolbar:false;'><!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テキストが完成しました。しかし、学びの道はそれだけではありません

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、