英単語の間隔を指定する場合は「word-spacing」を使用します。
日本語では「word-spacing」は有効とはなりませんが、あえて半角スペースを使用すると、日本語でも単語間隔が有効となります。
CSS Ver. | 適用要素 | 継承 |
---|---|---|
2.1 | 全要素 | する |
構文 | |
---|---|
word-spacing : normal | 値; |
|
プロパティ/設定値 | 意味 |
word-spacing : normal; word-spacing : 10px; word-spacing : 2em; word-spacing : 30%; |
単語の間隔を値で指定 「長さ・大きさの単位」参照 デフォルト:「タグ毎のスタイル初期値」を参照 |
<style type="text/css">
.common div{
font-family : "メイリオ", sans-serif;
width : 290px;
border : 2px solid #6495ed;
background : #e7e7ff;
padding : 10px;
}
div.cssTitle {
margin-top : 10px;
background : #6495ed;
color : #fff;
font-weight : bold;
}
.css_word-spacing_normal{
word-spacing : normal;
}
.css_word-spacing_value1{
word-spacing : 20px;
}
.css_word-spacing_value2{
word-spacing : 3em;
}
<!-- html -->
<div class="common">
<div class="cssTitle">word-spacing : normal;</div>
<div class="css_word-spacing_normal">
CSSの「word-spacing」は、単語の間隔を指定します。CSS "word-spacing" specifies word spacing.
</div>
<div class="cssTitle">word-spacing : px;</div>
<div class="css_word-spacing_value1">
CSSの「word-spacing」は、単語の間隔を指定します。CSS "word-spacing" specifies word spacing.
</div>
<div class="cssTitle">word-spacing : em;</div>
<div class="css_word-spacing_value2">
CSSの「word-spacing」は、単語の間隔を指定します。CSS "word-spacing" specifies word spacing.
</div>
</div>
関連するCSS(STYLE) | |
---|---|
hyphens | ハイフネーション(単語途中の改行指定)の利用 |
letter-spacing | 文字の間隔 |
white-space | 改行コード・タブ・スペースの表示 |
word-break | 自動改行のルール |
word-wrap | 長い単語の改行ルール |