css 3テキスト記

5527 ワード

css 3テキスト
cssテキスト機能では、フォント、色、テキストの3つに大きく分類されます.
text-shadow
テキストシャドウの設定

text-shadow:color x-offset y-offset blur-radius

color:シャドウカラー、オプション.x-offset:x軸オフセット量で、値は正、シャドウは右、値は負、シャドウは左です.y-offset:y軸オフセット量.値は正、シャドウは下、値は負、シャドウは上.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:テキストがオーバーフローしたときにその内容を切り取ります.Ellipsis:テキストオーバーフロー時に省略記号(...)が表示されます.

<!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;
}

Ellipsis効果

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;
    }

値がbreak-allの場合、word-wrapeの値がword-breakの効果と似ています.

<!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:デフォルトでは、空白はブラウザで無視されます.pre:空白はブラウザに保持されます.その動作はHTMLの

タグに似ています.nowrap:テキストは改行されず、
ラベルに遭遇するまで同じ行でテキストが続きます.pre-wrap:空白文字シーケンスは保持されますが、通常は改行されます.pre-line:空白のシーケンスをマージしますが、改行は保持されます.inherit:親要素からwhite-space属性を継承すべき値を指定します.<!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>
  
デフォルトでは(normal)、空白の文字が結合され、戻り文字が無視され、自動的に改行されます.div{
   width:100px;
   border:1px solid;
   white-space:pre;
}
  
値がpreの場合、空白文字と戻り文字を保持し、自動的に改行しません.div{
   width:100px;
   border:1px solid;
   white-space:pre-wrap;
}
  
値がpre-wrapの場合、空白文字と戻り文字を保持し、自動的に改行します.div{
   width:100px;
   border:1px solid;
   white-space:pre-line;
}
  
値がpre-lineの場合、空白文字がマージされ、戻り文字が保持され、自動的に改行されます.
css 3テキストが完了しました.学習の道は、止まらない.

ページレイアウト-3つのバー-左、中央のバー固定-右のバーは自動的に右または左、中のバーの下に適応します.

最小包囲矩形