ホームページ > ウェブフロントエンド > CSSチュートリアル > HTMLの``タグでテキストを折り返す方法?

HTMLの``タグでテキストを折り返す方法?

Barbara Streisand
リリース: 2024-12-14 10:09:14
オリジナル
747 人が閲覧しました

How to Make Text Wrap in HTML `` Tags?

Pre タグでのテキストの折り返し

HTML では、pre タグはコード ブロックやデバッグ出力表示に頻繁に使用されます。ただし、多くの場合、これらのタグ内のテキストが折り返されて、長く途切れることのないようにすることが望ましいです。解決策は、CSS の空白文字とワードラップのプロパティにあります。

テキストの折り返しの CSS プロパティ

pre タグでテキストの折り返しを有効にするには、次の CSS を利用します。プロパティ:

  • 空白: 事前ラップ; (CSS 2.1 )
  • 空白: -moz-pre-wrap; (Mozilla)
  • 空白: -pre-wrap; (オペラ 4-6)
  • 空白: -o-pre-wrap; (Opera 7)
  • word-wrap:break-word; (Internet Explorer 5.5 )

コード例

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
ログイン後にコピー

これを組み込むHTML ドキュメントに CSS ルールを組み込むと、pre タグ内のテキストが必要に応じて折り返され、長い単一行の表示が防止されます。

以上がHTMLの``タグでテキストを折り返す方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート