ホームページ  >  記事  >  ウェブフロントエンド  >  text-align:justify を使用して両端を揃える例_エクスペリエンス交換

text-align:justify を使用して両端を揃える例_エクスペリエンス交換

WBOY
WBOYオリジナル
2016-05-16 12:07:171425ブラウズ

text-align:justify は、複数行の最後以外の行の両端のみを揃えることができます。 IE には text-justify があるので、この問題は解決できますが、IE 以外のユーザーにとって、私の方法は特別な場合にのみ使用されるのでゴミです。

ソース コードの例 [www.52css.com]
.justify{
height:1.1em;
overflow:hidden;
text-align:justify;
text -justify :distribute-all-lines;
}
div.cn:after {
content: "____________________________________________";
font-size:100px;
}
そうです。 IEでは、コンテンツを使用し、最初の行の端が揃うように2行目までコンテンツを追加します。

ただし、ブラウザごとに中国語の理解方法が異なります。 Firefoxは漢字を直接区切りますが、Operaは漢字を区切らずスペースのみを認識するため、漢字の途中に半角英数や記号を入れると不均等になりますが、Safariの方がOperaに近いです。スペースを追加しないと区切ることはできません。

英語の方が優れています。なぜなら、誰もが単語を区切るのにスペースしか使えないからです。しかし、IE は単語を区切るのに text-justify:distribute-all-lines を使用します。これは非常に醜いものです。最初は IE を htc か js でサポートしようと考えていましたが、IE6 はあまりにも愚かであることに気づきました。家に IE7 がない場合はどうすればよいかわかりません。

もしくはスペースを打つのも良い方法ですが、Firefoxのような文字を拡大するだけのブラウザでは文字を拡大すると○○になってしまうので、私が書いたダメな方法は特定の状況下でしか役に立ちません。一言: 命を大切にして、Firefix から離れてください。

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