ホームページ > 記事 > ウェブフロントエンド > ワードラップとテキストオーバーフローの違いは何ですか? 2つのプロパティの詳細な説明
ワードラップとテキストオーバーフローの違いは何ですか? 2つのプロパティの詳細な説明
- 云罗郡主オリジナル
- 2018-10-26 16:24:114465ブラウズ
CSS スタイルでは、多くの人が 2 つの属性 (1 つはテキスト オーバーフロー、もう 1 つはテキストの折り返し) を区別できません。では、word-wrap 属性と text-overflow 属性とは何でしょうか。 word-wrap プロパティと text-overflow プロパティをまとめてみましょう。
1: word-wrap は改行属性を強制します
css3 では、word-wrap 属性を使用して、長い単語と URL の文字列と、それらが改行属性であるかどうかを判断できます。次の行に移動します。ワードラップには通常とブレークワードの 2 つの値があります。標準はデフォルト値を表し、2 つ目は URL の長さを設定して強制します。改行。
例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 word-wrap属性</title>
<style type="text/css">
#lvye
{
width:200px;
height:120px;
border:1px solid gray;
}
</style>
</head>
<body>
<div id="lvye">Welcome to the Chinese website, where there is endless PHP knowledge to let you roam in the sea of knowledge.http://www.php.cn/div-tutorial-275623.html</div>
</body>
</html>ブラウザでの上記のコードのプレビュー効果:
ワードラップをdiv :break-word; 単語が長すぎる場合は、強制的に改行されます。 Web サイトを作成するときは、デフォルト値を選択するだけです。
2: text-overflow テキスト オーバーフロー属性
Web ページをプレビューすると、テキストが特定の範囲を超えると、常にこの現象が発生します。省略記号の形で表示され、余分なテキストは表示されません。実際、この設定はユーザーにとってより良い設定であり、ユーザーがより多くのコンテンツを知るのに役立ちます。
冗長なコンテンツを非表示にしたい場合は、text-overflow 属性を使用できます。通常、text-overflow には 2 つの値があります。1 つはテキストがオーバーフローして省略記号が表示される場合です。は文字がはみ出して省略記号が表示され、はみ出した部分が表示されない場合です。
テキスト オーバーフローの構文は次のとおりです。
text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
使用するには、これら 3 つの条件が同時に表示されることが前提条件です。
例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 text-overflow属性</title>
<style type="text/css">
#div1
{
width:200px;
height:100px;
border:1px solid gray;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
</style>
</head>
<body>
<div id="div1">php是最好的语言，欢迎大家学习交流</div>
</body>
</html>表示効果は次のとおりです:
上記はワードラップとワードラップの詳細な説明です。 CSS の text-overflow 属性 はじめに、CSS ビデオ チュートリアル について詳しく知りたい場合は、php 中国語 Web サイトに注目してください。
以上がワードラップとテキストオーバーフローの違いは何ですか? 2つのプロパティの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。