Web ページ内のテキストの自動行折り返しを設定する方法

今回は、Webページ上のテキストに自動行折り返しを設定する方法を紹介します。Webページ上のテキストに自動行折り返しを設定する際の注意点は何ですか?実際の事例を見てみましょう。 Webページではテキストを表示するために使用されますが、テキストの長さや内容は事前にわかりません。このとき、テキストを表示するには主にfill divまたはpreを使用します。

div 要素を使用する場合は、幅を決定し、次の 2 つの属性を追加して、div に入力されたテキストが自動的に折り返されるようにします。

word-wrap: break-word;   //word-wrap 属性允许长单词或 URL 地址换行到下一行。//break-word在长单词或 URL 地址内部进行换行。word-break: break-all;//word-break 属性规定自动换行的处理方法。

pre要素を使用する場合も、同様に以下の2つの属性を追加すると、その中のテキストを自動的に折り返すことができます。

white-space: pre-wrap;    //pre-wrap保留空白符序列，但是正常地进行换行。word-break: break-all;
word-wrap: break-word;

テキストやその他の要素を入力できる div はよく知られていますが、テキストを div に配置すると、スペースや改行などの元の形式を維持できないことがよくあります。

pre 要素は、フォーマット済みのテキストを定義します。通常、pre 要素で囲まれたテキストには空白と改行が保持されます。テキストも固定幅フォントで表示されます。

pre タグの一般的な用途は、コンピューターのソース コードを表すことです。

段落区切りを引き起こす可能性のあるタグ (title、p、address タグなど) を pre で定義されたブロックに含めてはなりません。一部のブラウザーは段落終了タグを単純な改行として解釈しますが、この

動作

はすべてのブラウザーで同じではありません。 pre 要素で許可されるテキストには、リンク、画像、水平方向の区切り線に加えて、物理スタイルとコンテンツベースのスタイルのバリエーションを含めることができます。他のタグ (a タグなど) を pre ブロックに配置する場合は、HTML/XHTML ドキュメントの他の部分に配置されているかのように扱います。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

React でボタンにイベントを追加する方法

select を使用して選択された値を取得する方法

React で html を div に設定する

以上がWeb ページ内のテキストの自動行折り返しを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。