ホームページ >ウェブフロントエンド >フロントエンドQ&A >HTMLをラップする方法
HTML は、Web ページの構築に使用されるマークアップ言語です。 Webページをデザインする際には、文字の配置やレイアウトを考慮する必要がありますが、その中でも改行は非常に重要な部分です。この記事ではHTMLで行を折り返す方法を紹介します。
HTML での改行方法:
1.
タグを使用します
HTML では、
タグを使用して改行を実現します。タグは単一のタグであり、終了タグは必要ありません。改行を表すタグは単なるタグであり、その使用方法は非常に簡単です。
タグは段落、表、行で使用できます。
例:
e388a4556c0f65e1904146cc1a846beeこれはテキスト行です。
これは別のテキスト行です。 94b3e26ee717c64999d7867364b1b4a3
上記のコードをブラウザで実行すると、2 行のテキストが異なる行に表示されることがわかります。
2. e388a4556c0f65e1904146cc1a846bee タグを使用する
行を折り返すもう 1 つの方法は、e388a4556c0f65e1904146cc1a846bee タグを使用することです。テキストの段落を複数の行に分割し、各行の間に空行を入れることができます。各段落は個別の HTML 要素です。
例:
e388a4556c0f65e1904146cc1a846beeこれはテキストの最初の段落です。 94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846beeこれはテキストの 2 番目の段落です。 94b3e26ee717c64999d7867364b1b4a3
上記のコードをブラウザで実行すると、2 行のテキストが別の段落に表示されます。
3. dc6dce4a544fdca2df29d5ac0ea9906b タグを使用する
e388a4556c0f65e1904146cc1a846bee タグと
タグを使用することに加えて、dc6dce4a544fdca2df29d5ac0ea9906b タグを使用して改行を行うこともできます。 。このタグは「コンテナ タグ」と呼ばれ、複数の HTML 要素を自己完結型のブロックレベルのコンテナにカプセル化し、他のコンテンツから独立させます。
例:
dc6dce4a544fdca2df29d5ac0ea9906bこれはテキストです16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906bこれは別のテキストです16b28748ea4df4d9c2150843fecfba68
上記のコードをブラウザーで実行すると、2 行のテキストが異なる行に表示されることがわかります。
4. CSS スタイルを使用する
CSS は、Web ページのスタイルを設定するために使用される言語です。さまざまなスタイルを設定することで、Web ページの外観とレイアウトを変更できます。 HTML に改行を実装したい場合は、CSS スタイルを使用してこれを実現することもできます。
例:
c9ccee2e6ea535a969eb3f532ad9fe89
.line {
white-space: pre-line;
}
531ac245ce3e4fe3d50054a55f265927
0ec622228e31c88495410d334f22b7c7これは 1 行目です
これは 2 行目です16b28748ea4df4d9c2150843fecfba68
上記の CSS スタイルでは、空白属性と行前値は次のように設定されています。空白 文字の処理方法。 pre-line 値を設定すると、改行は保持され、その他の無関係なスペースとタブは無視されます。
概要
HTML に改行を実装する方法は上記の 4 つで、必要に応じていずれかを選択できます。実際の Web ページのデザインでは、ユーザーに優れた視覚体験を提供するために、さまざまな要素のレイアウトとタイポグラフィを考慮する必要があります。
以上がHTMLをラップする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。