CSS のワードラップとワードブレイクを本当に完全に理解していますか_html/css_WEB-ITnose

背景

ある日、上司がグループ内で、なぜ英語の単語が切り捨てられたのかを報告しました。

明らかに、これはフロントエンドのせいであり、私たちが責任を負わなければなりません。この問題は単純すぎるため、CSS に 2 行の属性を追加するだけで数分で解決できます。

コードを送信してページを更新してください。消去しましたが、単語の分割がまだないのはなぜですか?不可能！ ！ ！ これら 2 つの属性に互換性の問題や制限はありますか?足を痛めないよう、詳しく見てみましょう。

CSS ワードブレーク、改行

キーワード: ワードブレーク、ワードラップ

事前に宣言: 上記の問題はこれら 2 つの属性で解決できます問題はありません。ここで知識を深め、定着させたいだけです。理由を知りたい学生は次のセクションを直接読んでください。

ワードブレークとワードラップはどちらも比較的一般的な属性であり、ワードブレークや省略記号のオーバーフロー表示などの一般的な機能に必要です。しかし、それらが正確に何を意味し、どのような特性を持っているのか、よく分からない人も多いかもしれません。とにかく、わかりません。インターネットで調べて使うたびに、この 2 つの属性はよく似ていて、いつも思い出せません。

さあ、まずドキュメントを読みましょう。

normal ブラウザのデフォルトの改行ルールを使用します。 break-all では単語内での改行が許可されます。 keep-all は半角スペースまたはハイフンでのみ改行できます。

http://www.w3school.com.cn/cssref/pr_word-break.asp

normal のみ許可されていますハイフネーションポイントにより改行されます (ブラウザはデフォルトの処理を維持します)。 break-word 長い単語または URL アドレス内の改行。

http://www.w3school.com.cn/cssref/pr_word-wrap.asp

理解できましたか?とにかく、理解できないようです。

写真を見るともっと良く見えます。

http://www.w3school.com.cn/tiy/t.asp?f=css3_word-wrap

私はそれを信じますおそらく理解できるでしょうか。簡単に要約します。

1. 単語区切り 単語を行末に配置できない場合、その単語を行内に配置する方法を決定します。 Break-all: 押し込めない場合は、残りを次の行に表示します。横暴なタイプ。 keep-all: もう離せないなら、別の行に表示します。もう離せないなら、私は引き下がりません。傲慢なタイプ。
2. word-wrap 行末が収まらない場合、単語内での行折り返しを許可するかどうかを決定します。 通常: 単語が長すぎる場合は新しい行に表示され、1 行を超える場合は改行で表示されます。ライン、オーバーフローします。 Break-word: 単語が長すぎる場合は、単語を折り返しても長すぎる場合は、単語を折り返してください。
3. 上記の改行はすべて英語の単語に関するものです。CJK (中国語/日本語/韓国語) などの言語については忘れてください。信じられない場合は、以下をお読みください。 text

研究によると、漢字の順序は必ずしも読みに影響しないことがわかっています。たとえば、この文を読んだ後、すべての文字が乱れていることがわかります。

このようにすると、単語を区切るだけでなく、スムーズに読むことができます...

理論的には、 word-break: keep-all;word-wrap を追加します。 Break-word; 他にも落とし穴があるようです。

スペース変換

キーワード: ホワイトスペース

ワードブレークとワードラップの使用が正しいことを確認したら、独自のコードのチェックを開始します。パケットをキャプチャした後、バックグラウンドで生徒が返したテキスト内のすべてのスペースが に置き換えられていることがわかりました。

何?代わりにエスケープ文字を使用する理由は何ですか?なぜ CSS はこのエスケープされたスペースを認識しないのでしょうか?

私はバックグラウンドでクラスメートに電話して、「昔、あるフロントエンドの問題を解決するためにこれをやったんだ」と言いました。頭を掻いて思い出してみたら、確かにそうだった。ブラウザは自動的に複数のスペースを 1 つのスペースに圧縮して表示するためです。ユーザーの元の入力を復元するために、スペースは HTML エスケープされます。

1. 多くのユーザーは、改行したり、広い文字間隔を実現するためにスペースを使用します。
2. 文字を描くのも楽しいですが、スペースを圧縮するとすべてが汚くなります。キャラクターの描き方が分からない方は以下をご覧ください

プロのキャラクター描画制作者が全角スペースを使って描きますので、ブラウザのスペース結合を心配する必要はありません問題

わかりました、それではまだタッチできません。

ブラウザがスペースを自動的に圧縮するのはなぜですか?

1. これが標準です、それだけです故意https://www.w3.org/TR/REC-html40/struct/text.html#h-9.1
2. スペースが自動的に圧縮されない場合、HTML を記述するときに 1 行しか書くことができません。そうしないと、このコード内に大きな空白スペースができてしまいます。

3. <div><div>bananas</div></div>

このように規定されているため、ピットを埋めてしまうと、必ず方法を見つけます。空白について考えてみましょう。ホワイトスペース ナラップ属性は、特殊効果と連携するために頻繁に使用するだけです...実際には、ロックが解除されていない姿勢がさらにあります。

white-space: normal | nowrap | pre | pre-wrap | pre-line 我们重点关注pre开头的几个属性。pre是preserve(保留)的缩写。没错，它就跟保留空格有关系。

pre: すべてのスペースと復帰を保持し、改行を許可しないでください。 pre-wrap: すべてのスペースと復帰を保持しますが、改行は許可します。 pre-line: スペースを結合し、改行を許可します

意思简单明了，好像也不用解释什么。

所以我们的解决方案来了：后台按照用户的输入的原始空格返回，不用做转义，前端加上

word-break: keep-all;word-wrap: break-word;white-space: pre-wrap;

蹭蹭蹭修改完，貌似没什么问题。

不过，这些个属性都是作用于Text上的，而我们的页面里有很多都是富文本，如果将pre-wrap作用于富文本上的父节点上也会有同样的功效吗？带着疑问，测试了几个富文本，果然出现了大段空白….

富文本里的html标签之间有空格。

有兴趣的同学可以在

http://www.taoba.comhttp://www.qq.com

的body上加上white-space:pre-wrap看看效果。

那富文本的问题要怎么解决呢，黑科技登场了！！

无法反抗，那就享受吧。既然浏览器会压缩多个空格，那只要保证文本里每次只有一个空格相邻不就可以了。□ -> □□□ -> □ □□□ -> □ □□□□□ -> □ □ 自动规避了浏览器的合并空格策略。

这个思路来自于富文本编辑器，写过富文本编辑器的同学可能会不屑一顾，这个方案我们都用烂了.. 感谢你们！！(写个富文本编辑器是学习前端的最佳方式，欢迎闲的蛋疼的同学快去踩坑)

通知后台同学按照这个规则来改，问题搞定。

总结

1. word-wrap： 决定句尾放不下单词时，单词是否换行
2. word-break: 决定单词内该怎么换行
3. 平文本可以配合white-space: pre-wrap来解决多空格压缩显示问题
4. 富文本采用的解决方案是对空格进行间隔html转义，这种方法更灵活，可以适应不同的场景，也适用于平文本。