ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSSの改行コードとは何ですか?

CSSの改行コードとは何ですか?

青灯夜游
青灯夜游オリジナル
2021-07-27 16:54:1719517ブラウズ

css 改行コード: 1. 「word-wrap:break-word;word-break:normal;」ステートメントは自動行折り返しを実現できます; 2.「word-break:break-all;」ステートメントは強制的な英単語のラップを実現できます。

CSSの改行コードとは何ですか?

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

css で行を折り返すいくつかの方法

自動行折り返し

div{
    word-wrap: break-word;
    word-break: normal;
}

英語の単語の改行を強制する

 div{
    word-break:break-all;
 }

改行なしを強制する

div{
    white-space:nowrap;
}

説明:

1. ホワイトスペース属性

ホワイトスペース属性は、空白の処理方法を設定します。要素内のスペース。

この属性は、レイアウト プロセス中に要素内の空白文字を処理する方法を宣言します。

構文:

white-space : normal | pre | nowrap | pre-wrap | pre-line ;

属性値:

  • normal: デフォルト。空白はブラウザによって無視されます。

  • pre: 空白はブラウザによって保持されます。これは、HTML の e03b848252eb9375d56be284e690e873 タグのように動作します。

  • nowrap: テキストは折り返されません。テキストは、0c6dc11e160d3b678d68754cc175188a タグが見つかるまで同じ行に続きます。

  • pre-wrap: 空白シーケンスを保持しますが、行は通常どおり折り返されます。

  • pre-line: 空白シーケンスを結合しますが、改行は保持します。

2. word-wrap 属性

word-wrap 属性を使用すると、長い単語や URL アドレスを次の行に折り返すことができます。

構文

word-wrap: normal|break-word;

属性値:

  • normal: 許可されたハイフネーション位置でのみ改行します (ブラウザはデフォルトの処理を維持します)。

  • break-word: 長い単語または URL アドレス内の改行。

3. word-breaks 属性

word-break 属性は自動行折り返しの処理方法を指定します。

構文

word-break: normal|break-all|keep-all;

属性値:

  • normal: ブラウザのデフォルトの行折り返しルールを使用します。

  • break-all: 単語内での改行を許可します。

  • keep-all: 半角スペースまたはハイフンでのみ改行します。

(学習ビデオ共有: css ビデオ チュートリアル)

以上がCSSの改行コードとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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