ホームページ > 記事 > ウェブフロントエンド > CSSで文字の両端を揃えるコード例を解説
CSSで文字の両端を揃えるコード例を解説
- 不言転載
- 2018-11-12 15:40:402529ブラウズ
この記事の内容は、テキストの両端揃えを実現するための CSS のコード例を説明するものです。必要な方は参考にしていただければ幸いです。
フォームを作成する際、名前や携帯電話番号、出身地などの項目の上下を揃えるという場面によく遭遇します。このようにして、text-align スタイルと text-justify スタイルを使用します。
text-align を直接両端揃えに設定するだけです。text-justify の状況は複雑なので、慣れていない人もいるかもしれません。 IE の値は次のとおりです。
auto: ブラウザ ユーザー エージェントが使用する配置ルールを決定できるようにします。
inter-word: 単語の間にスペースを追加してテキストを配置します。この動作は、テキストのすべての行を揃える最も速い方法です。両端揃えの動作は、段落の最終行には影響しません。
newspaper : 単語または文字間のスペースを増減してテキストを配置します。ラテンアルファベットを両端揃えするための最も正確な形式です
distribute: 新聞と同じようにスペースを処理します
distribute-all-lines:distribute と同じ方法で行を配置します。また、最後の行も除外します整列した 2 つの段落。表意文字ドキュメントに適用されます
inter-ideograph : 表意文字テキストの完全な位置揃えを提供します。表意文字と単語の間のスペースを増減します。
しかし、これは text-overflow や overflow-x などの IE のプライベート実装として最初に実装され、FF では非常に後期になってから実装されました。言い換えれば、厳密な互換性の問題があります。また、FF と Chrome では、有効にするには漢字の間に空白スペースまたはソフト改行を手動で挿入する必要があります。Chrome で遭遇する抵抗はさらに大きくなります。 p>
計画:
.test1 {
text-align:justify;
text-justify:distribute-all-lines;/*ie6-8*/
text-align-last:justify;/* ie9*/
-moz-text-align-last:justify;/*ff*/
-webkit-text-align-last:justify;/*chrome 20+*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
.test1:after{
content:".";
display: inline-block;
width:100%;
overflow:hidden;
height:0;
}
}
运行代码：
<!DOCTYPE HTML>
<html>
<head>
<title>文本两端对齐 </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.box1{
background:red;
width:30%;
}
.test1 {
text-align:justify;
text-justify:distribute-all-lines;/*ie6-8*/
text-align-last:justify;/* ie9*/
-moz-text-align-last:justify;/*ff*/
-webkit-text-align-last:justify;/*chrome 20+*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
.test1:after{
content:".";
display: inline-block;
width:100%;
overflow:hidden;
height:0;
}
}
</style>
</head>
<body>
<div class="box1">
<div class="test1">姓 名</div>
<div class="test1">姓 名 姓 名</div>
<div class="test1">姓 名 名</div>
<div class="test1">所 在 地</div>
<div class="test1">工 作 单 位</div>
</div>
</body>
</html>
以上がCSSで文字の両端を揃えるコード例を解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。