ホームページ > 記事 > ウェブフロントエンド > CSS 自動行折り返し、強制行折り返しなし、強制改行、display_html/css_WEB-ITnose を超える省略記号
CSS 自動行折り返し、強制行折り返しなし、強制改行、display_html/css_WEB-ITnose を超える省略記号
- WBOYオリジナル
- 2016-06-24 11:22:591178ブラウズ
P タグはデフォルトで自動的に折り返されるため、幅を設定するとより良い結果が得られます。ただし、最近のプロジェクトでは、ajax を使用してデータをロードした後、p タグ内のコンテンツが折り返されないことが判明しました。結果的にレイアウトが乱れてしまったので、問題は解決しましたが、本質的な原因は、その時に得たデータが長い列だったということです。ブラウザは数字と英単語を同様の方法で処理する必要があり、切り捨てられることはありません。
最初にさまざまな方法を示し、次に各属性を詳しく紹介します。
強制的に改行しない
p {white-space:nowrap; }
自動改行
p {word-wrap:break-word; }
英語の単語を強制的に改行する
p { word-break:break-all; }
*注意: 英単語の強制改行を設定するには、インライン要素をブロックレベル要素に設定する必要があります。
表示省略記号を超える
p{text-overflow:ellipsis;overflow:hidden;}
white-space:normal|pre|nowrap|pre-wrap|pre-line|inherit;
白色の設定方法-space 属性 要素内の空白を処理します
通常のデフォルト。空白はブラウザによって無視されます。
前の空白はブラウザによって保持されます。 HTML の pre タグのように動作します。
nowrap テキストは折り返されず、br タグに遭遇するまで同じ行に続きます。
pre-wrap は空白シーケンスを保持しますが、通常どおりラップします。
pre-line は空白シーケンスをマージしますが、改行は保持します。
inherit は、空白属性の値が親要素から継承されることを指定します。
word-wrap:normal|break-word;
word-wrap 属性は、ブラウザが単語内の文を分割できるかどうかを示すために使用されます。これは、文字列が長すぎて自然な文になっている場合を防ぐためです。クリックするとオーバーフローが発生します。
normal: 許可された単語の区切りポイントでのみ改行します (ブラウザはデフォルトの処理を維持します)
break-word: 長い単語または URL アドレス内で改行します
word-break:normal|break-all|keep-all;
単語-break 属性は、単語内の文を分割する方法を示すために使用されます。
normal: ブラウザのデフォルトの改行ルールを使用します。
break-all: 単語内での改行を許可します
keep-all: 半角スペースまたはハイフンでのみ改行します
違いの例:
<!doctype html><html lang="en"> <head> <!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码--> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="Keywords" content="关键词一，关键词二"> <meta name="Description" content="网站描述内容"> <meta name="Author" content="Yvette Lau"> <title>Document</title> <!--css js 文件的引入--> <style> .word{background:#E4FFE9;width:250px;margin:50px auto;padding:20px;font-family:"microsoft yahei";} /* 强制不换行 */ .nowrap{white-space:nowrap;} /* 允许单词内断句，首先会尝试挪到下一行，看看下一行的宽度够不够， 不够的话就进行单词内的断句 */ .breakword{word-wrap: break-word;} /* 断句时，不会把长单词挪到下一行，而是直接进行单词内的断句 */ .breakAll{word-break:break-all;} /* 超出部分显示省略号 */ .ellipsis{text-overflow:ellipsis;overflow:hidden;} </style> </head> <body> <div class = "word"> <p class = "nowrap">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfs</p> <p class = "breakword">wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihui</p> <p class = "breakAll">wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihuivf</p> <p class = "normal">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsa</p> <p class = "ellipsis">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsab</p> </div> </body></html> 効果は次のとおりです: