回答編集履歴
2
レイアウト修正
answer
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
> Google検索でfloatとflexの文字の改行位置と調べてみましたがやはりこれもダメでした。
|
|
2
|
+
|
|
2
3
|
問題の原因はそこではありません.
|
|
3
4
|
|
|
4
5
|
CSSにおける`width`値が(文字数ではなく)レイアウト時の幅を表すからです.
|
1
回答を詳細化
answer
CHANGED
|
@@ -5,4 +5,10 @@
|
|
|
5
5
|
|
|
6
6
|
そもそも「文字」をスクリーンに表示する際に必要となる「フォント」は「文字の形」（これを**グリフ**と呼びます）の集まりであり, 個々のグリフは固有の幅をもっています. この文字幅の情報をもとにWEBブラウザは(`width`値を超えないように)スクリーンに文字列を表示します.
|
|
7
7
|
|
|
8
|
-
そのため`width`値を調整すると, あと一個グリフが入るか入らないかの境界で改行の位置が変化するのです.
|
|
8
|
+
そのため`width`値を調整すると, あと一個グリフが入るか入らないかの境界で改行の位置が変化するのです. で, この調整具合がWEBブラウザごとに全て異なるので, 本来「自動改行の位置を`width`幅で制御する」ことに本質的な意味はありません.
|
|
9
|
+
|
|
10
|
+
NOTE:
|
|
11
|
+
同様にグリフ幅はフォントの種類によっても変化します. 例えば「等幅フォント(monospace)」であれば, グリフ幅が固定となるため, 改行位置を予測しやすくなります.
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
ですが「提示されたデザインに近づける」ことを最優先課題とする(つまり改行の位置にデザイン上重大な意味が含まれている)のであれば, `br`要素を用いて改行を強制させればよいでしょう.
|