ワードラップとテキストオーバーフローの違いは何ですか? 2つのプロパティの詳細な説明-CSSチュートリアル-php.cn

ワードラップとテキストオーバーフローの違いは何ですか? 2つのプロパティの詳細な説明

云罗郡主

リリース： 2018-10-26 16:24:11

オリジナル

4512 人が閲覧しました

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.//m.sbmmt.com/div-tutorial-275623.html</div>
</body>
</html>

ログイン後にコピー

ブラウザでの上記のコードのプレビュー効果:

ワードラップとテキストオーバーフローの違いは何ですか? 2つのプロパティの詳細な説明

ワードラップを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>

ログイン後にコピー

表示効果は次のとおりです:

ワードラップとテキストオーバーフローの違いは何ですか? 2つのプロパティの詳細な説明