ワードブレークとワークラップの違いの紹介例

word-break: [ワードブレーク]

定義: 自動行折り返しの処理方法を指定します。 注: ワードブレークを使用すると、ブラウザを使用して任意の位置で行を折り返すことができます。

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

デフォルト値	normal
継承	はい
バージョン	css3
Javascript 構文	object.style.wordBreak="keep-all"

値	説明
通常	ブラウザのデフォルトの改行ルールを使用します。
break-all	を使用すると、単語内での改行が可能になります。
keep-all	は、半角スペースまたはハイフンでのみ折り返すことができます。

互換性:

例:

<span class="text-s">iIanishttp://www.php.cn/;/span>    
.text-s {    
    display: inline-block;    
    width: 240px;    
    // word-break: keep-all;    
}

ワードブレイクが設定されていません:

word-break:break -all を設定する;

Set word-break:keep-all;or word-break:normal;

word-wrap:【改行】

定義: 長い単語を許可する またはURL アドレスは次の行に折り返されます。

構文: ワードラップ: 通常|ブレークワード;

デフォルト値:	通常
継承:	はい
バージョン:	CSS3
JavaScript構文:	オブジェクト.style.wordWrap="ブレイクワード"

値説明通常 ハイフネーションのみ許可されますクリックしてラップ (ブラウザはデフォルトの処理を維持します)。 改行 長い単語または URL アドレス内の改行。

互換性:

例: [上記と同じ]

ワードラップの設定を解除:

ワードラップの設定: 通常;

Set word-wrap:break-word;

上記の栗の設定 word-break:break-all と word-wrap:break-word の違いを比較してください

概要:

単語区切り: 単語を行末に配置できない場合、単語を行末に配置する方法を決定 => 単語を行末に配置できない場合に単語を改行するかどうかを決定文末

break-all:強制配置、残りが押し込めない場合は次の行が表示されます。

Keep-all: 配置できない場合は別の行に表示します。配置できない場合はオーバーフローして表示されます。

word-wrap: 行末が収まらない場合、単語内での折り返しを許可するかどうかを決定 => 単語内での単語の折り返し方法を決定

通常: 単語が長すぎるため、単語内で表示されます改行し、1行を超えるとオーバーフローします。

単語の区切り: 単語が長すぎる場合は、最初に単語を区切るようにしてください。改行後もまだ長すぎるため、単語を区切ることもできます 。

追加: テキストを両端に揃えます

属性: text-align:justify;

互換性: 非常に悪い

text-align:center;

text-align:justify ;

ワードブレイクワークラップの違いに関する上記の簡単な分析は、編集者によって共有されたすべての内容です。参考になれば幸いです。また、PHP 中国語 Web サイトをサポートしていただければ幸いです。

ワードブレイクワークラップと関連記事の違いのその他の例については、PHP 中国語 Web サイトに注目してください。