英字フォント時、<div>でwidthを指定しても、幅が固定されない

質問

こんにちは。
DIVで、widthを指定し、幅を固定したいのですが、
どうしても文字列の幅まで、広がってしまいます。
これが、日本語フォントのときは、
固定されます。
やりたいことは、
DIVの幅を小さくし、一文字ずつ自動改行
させることにより、縦書きを実現したいのです。
（等幅フォントを使います）。

CSS部分～
.haccordion .header{
width: 20px; /*タブの幅*/
font-size:120%;
font-family:monospace
}

HTML部分～
<div class="haccordion">
<div class="header">こんにちは。</div>

これで、こんにちは。は、縦書きになります。
これを、HELLOとすると、横書きになってしまいます。

もう少しなのに、
困っています。
何か分かる人がいましたら、
よろしくお願いします。
ちなみに、ブラウザは、IE(7)です。

回答No.1

_himajin_ · ベストアンサー

IE限定で良ければ以下のような指定で縦書きにできます。
writing-mode: tb-rl;

div でやるなら1文字ごとにスペースを空ければ縦書きのようになります。
これは、単語の途中では折り返さないようになっているためです。
# 規格上、これが正しい動作かは確認してませんが。

日本語の場合は1文字=1単語とカウントされて折り返されるのだと思われます。
# 英語などと違って単語を認識するのが大変なので。

お礼

ありがとうございます！！
うまくいきましたし、
理由も明快で、もう間違えることは、
ないと思います。
半分あきらめていただけに、
たすかりました。

回答No.3

abril

ちょっと根本的な理解に難があるのですが…そもそも英語は本来、「縦書き」ということが有り得ない言語です。ですから今思い描いている様なレイアウト自体お奨めできない（ネイティブの英文校正者などからはNGを食らいます）のですが、まあそれは置いておいて何故ご希望の動作にならないのかという事だけ。
"HELLO"といった様な1バイト文字がスペースを挟まずに連続している場合、それは1ワードとして捉えられますから、”ブラウザの仕様”に依り1ワードは途中で改行されないという禁則処理が働くからです。
例として、日本語は「あなた」という単語が
…あな（改行）
たは…
と表示されても言語の性質上、意味不明になる事はありませんが、英語の場合"you"が
…y（改行）
ou are…
と表示されてしまったらその時点で文章としておかしい事になってしまいますから、英単語は途中で改行されないという仕様なのでしょう（ワープロソフトなどでは、禁則処理をシラブル毎に"-"（ハイフン）を入れる形式に変更する事もできますが）。
従っていくらCSSでwidthを設定してもそれは無視されます。
ちなみに、本件とは若干質問内容のテイストは違いますが類似の質問は今までにも何度か出ています。

ということで、もしどうしてもそういう事をしたいのであれば、ANo.1様の様な処理になります。ただ、そちらでも仰られている通り"writing-mode: tb-rl;"はIE以外の環境では無効ですし、「1文字ごとにスペースを空け」たらそれはもう"HELLO"という単語としては認識されなくなってしまいますので、いずれにせよユーザビリティの良い状態ではなくなるという事は覚悟して下さい。

お礼

回答ありがとうございます。
うまくいきましたし、
理由も明快で、もう間違えることは、
ないと思います。
スペースを入れて、対応します。
ちなみに、アコーディオンタブの見出しなので、
一行、一単語の縦書きは、やむを得なかった
ところです。

回答No.2

noname#66720

.header {
display:inline;
}

未検証ですが、上ので上手くいかないですか？

お礼

＃１さんの回答でうまくいきました。
inlineもあとで試してみます。
ありがとうございました。