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

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

云罗郡主

Oct 26, 2018 pm 04:24 PM

text-overflowword-wrap属性

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>

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

ワードラップとテキストオーバーフローの違いは何ですか? 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つのプロパティの詳細な説明

上記はワードラップとワードラップの詳細な説明です。 CSS の text-overflow 属性はじめに、CSS ビデオチュートリアル について詳しく知りたい場合は、php 中国語 Web サイトに注目してください。

以上がワードラップとテキストオーバーフローの違いは何ですか? 2つのプロパティの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

CSS Flexbox vsグリッド：包括的なレビューMay 12, 2025 am 12:01 AM

FlexBoxまたはグリッドの選択は、レイアウト要件によって異なります。1）FlexBoxは、ナビゲーションバーなどの1次元レイアウトに適しています。 2）グリッドは、雑誌のレイアウトなどの2次元レイアウトに適しています。この2つは、レイアウト効果を改善するためにプロジェクトで使用できます。

CSSファイルを含める方法：メソッドとベストプラクティスMay 11, 2025 am 12:02 AM

CSSファイルを含める最良の方法は、タグを使用してHTMLパーツに外部CSSファイルを導入することです。 1.タグを使用して、外部CSSファイルを導入します。 2。小さな調整のために、インラインCSSを使用できますが、注意して使用する必要があります。 3.大規模プロジェクトでは、@Importを介して他のCSSファイルをインポートするために、SASS以下などのCSSプリプロセッサを使用できます。 4。パフォーマンスのために、CSSファイルをマージし、CDNを使用し、CSSNANOなどのツールを使用して圧縮する必要があります。

FlexBox対グリッド：両方を学ぶべきですか？May 10, 2025 am 12:01 AM

はい、Youはrelearnbothlexboxandgrid.1）FlexBoxisidealforone-Dimensional、FlexiblleayoutslikenavigationMenus.2）Gridexcelsintwo-digsignssuchasmagazinelayouts.3）Bothenhanceslaysutibulivedibulisunivedivition、floctonsulururを

軌道力学（またはCSSキーフレームアニメーションの最適化方法）May 09, 2025 am 09:57 AM

独自のコードをリファクタリングするのはどのように見えますか？ジョン・レアは、彼が書いた古いCSSアニメーションを選び、それを最適化するという思考プロセスを歩きます。

CSSアニメーション：それらを作成するのは難しいですか？May 09, 2025 am 12:03 AM

cssanimationsArenotintinlentyhardbutrepracticeanderstanding ofcsspropertiesandtimingfunctions.1）

@KeyFrames CSS：最も使用されているトリックMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversitility andpowerincreatingsmoothcssanimations.keytricksinclude：1）defingsmoothtransitionsbetweenstates、2）AnimatingMultipleProperiessimally、3）3）bendorprefixesforbrows -compativity、4）組み合わせwithjavasfo