ワードラップとテキストオーバーフローの違いは何ですか? 2つのプロパティの詳細な説明
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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7546
15
1381
52
83
11
21
89
SyntaxErrorを発生させずにPythonで整数リテラルプロパティを取得する方法は?
Aug 20, 2023 pm 07:13 PM
SyntaxError の代わりに intliteral 属性を取得するには、スペースまたは括弧を使用します。intliteral は Python の数値リテラルの一部です。数値リテラルには、次の 4 つの異なる数値型も含まれます。int(signed integers) - これらは、単に整数または整数と呼ばれることが多く、正の値です。
JavaでGsonを使用してJSONのプロパティの名前を変更するにはどうすればよいですか?
Aug 27, 2023 pm 02:01 PM
Gson@SerializedName アノテーションは JSON にシリアル化でき、指定された名前の値をフィールド名として持つことができます。このアノテーションは、Gson インスタンスに設定されているデフォルトのフィールド命名ポリシーを含む、あらゆる FieldNamingPolicy をオーバーライドできます。 GsonBuilder クラスを使用して、さまざまな命名戦略を設定できます。構文@Retention(value=RUNTIME)@Target(value={FIELD,METHOD})public@interfaceSerializedNameExample importcom.google.gson.annotations.*;
Python の dir() 関数: オブジェクトのプロパティとメソッドを表示する
Nov 18, 2023 pm 01:45 PM
Python の dir() 関数: オブジェクトのプロパティとメソッドを表示します。特定のコード サンプルが必要です。 要約: Python は強力で柔軟なプログラミング言語であり、その組み込み関数とツールは開発者に多くの便利な機能を提供します。非常に便利な関数の 1 つは dir() 関数です。これを使用すると、オブジェクトのプロパティとメソッドを表示できます。この記事では、 dir() 関数の使用法を紹介し、具体的なコード例を通じてその機能と使用法を示します。テキスト: Python の dir() 関数は組み込み関数です。
Win11 ディスクのプロパティが不明な場合の対処方法
Jul 03, 2023 pm 04:17 PM
Win11のディスクプロパティが不明な場合はどうすればよいですか?最近、Win11 ユーザーは、コンピュータを使用しているときにシステムによってディスク エラーが発生していることに気付きました。何が起こっているのでしょうか?そしてそれをどうやって解決するのでしょうか？詳細な操作方法を知らない友人も多いと思いますが、Win11 のディスク エラーを解決する手順をエディターが以下にまとめましたので、興味がある方はエディターをフォローして以下をお読みください。 Win11 ディスク エラーを解決する手順 1. まず、キーボードの Win+E キーの組み合わせを押すか、タスクバーのファイル エクスプローラーをクリックします; 2. ファイル エクスプローラーの右側のサイドバーで、側面を見つけてローカル ファイルを右クリックしますディスク (C:)、開いたメニュー項目で [プロパティ] を選択します; 3. ローカル ディスク (C:) の [プロパティ] ウィンドウ、[ツール] に切り替えます。
CSSのbottom属性構文
Feb 21, 2024 pm 03:30 PM
CSS の Bottom 属性の構文とコード例 CSS では、bottom 属性は要素とコンテナの下部の間の距離を指定するために使用されます。親要素の下部を基準とした要素の位置を制御します。ボトム属性の構文は次のとおりです: element{bottom:value;} ここで、element はスタイルが適用される要素を表し、value は設定されるボトム値を表します。 value にはピクセルなどの特定の長さの値を指定できます
JavaScript における pageXOffset 属性の役割は何ですか?
Sep 16, 2023 am 09:17 AM
ウィンドウの左上隅からドキュメントがスクロールされるピクセルを取得する場合は、pageXoffset プロパティと pageYoffset プロパティを使用します。水平ピクセルには pageXoffset を使用します。例 次のコードを実行して、JavaScript で pageXOffset 属性を使用する方法を学習できます - ライブ デモンストレーション<!DOCTYPEhtml><html> <head> <style> &
ハースストーンの絶望の糸の属性の紹介
Mar 20, 2024 pm 10:36 PM
絶望の糸はBlizzard Entertainmentの名作『ハースストーン』に登場するレアカードで、カードパック「ウィズベインのワークショップ」で入手できるチャンスがあります。 100/400の秘術ダストポイントを消費して、ノーマル/ゴールドバージョンを合成できます。ハースストーンの絶望の糸の属性の紹介: ウィズベインのワークショップ カード パックで確率で入手できるか、秘術の粉塵を通じて合成することもできます。レアリティ：レア 種類：呪文 クラス：デスナイト マナ：1 効果：すべてのミニオンに断末魔を与える：すべてのミニオンに1ダメージを与える
Vue.set関数を使用して属性を動的に追加する方法と例
Jul 24, 2023 pm 07:22 PM
Vue.set 関数を使用してプロパティを動的に追加する方法と例 Vue では、既存のオブジェクトにプロパティを動的に追加する場合、通常は Vue.set 関数を使用します。 Vue.set 関数は Vue.js によって提供されるグローバル メソッドであり、プロパティを追加するときに確実に応答性の高い更新を行うことができます。この記事では、Vue.set の使用方法を紹介し、具体的な例を示します。まず、Vue では通常、data オプションを使用してレスポンシブ データを宣言します。
