こんにちは。
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ベストアンサー
- 回答日時:
IE限定で良ければ以下のような指定で縦書きにできます。
writing-mode: tb-rl;
div でやるなら1文字ごとにスペースを空ければ縦書きのようになります。
これは、単語の途中では折り返さないようになっているためです。
# 規格上、これが正しい動作かは確認してませんが。
日本語の場合は1文字=1単語とカウントされて折り返されるのだと思われます。
# 英語などと違って単語を認識するのが大変なので。
ありがとうございます!!
うまくいきましたし、
理由も明快で、もう間違えることは、
ないと思います。
半分あきらめていただけに、
たすかりました。
No.3
- 回答日時:
ちょっと根本的な理解に難があるのですが…そもそも英語は本来、「縦書き」ということが有り得ない言語です。
ですから今思い描いている様なレイアウト自体お奨めできない(ネイティブの英文校正者などからはNGを食らいます)のですが、まあそれは置いておいて何故ご希望の動作にならないのかという事だけ。"HELLO"といった様な1バイト文字がスペースを挟まずに連続している場合、それは1ワードとして捉えられますから、”ブラウザの仕様”に依り1ワードは途中で改行されないという禁則処理が働くからです。
例として、日本語は「あなた」という単語が
…あな(改行)
たは…
と表示されても言語の性質上、意味不明になる事はありませんが、英語の場合"you"が
…y(改行)
ou are…
と表示されてしまったらその時点で文章としておかしい事になってしまいますから、英単語は途中で改行されないという仕様なのでしょう(ワープロソフトなどでは、禁則処理をシラブル毎に"-"(ハイフン)を入れる形式に変更する事もできますが)。
従っていくらCSSでwidthを設定してもそれは無視されます。
ちなみに、本件とは若干質問内容のテイストは違いますが類似の質問は今までにも何度か出ています。
ということで、もしどうしてもそういう事をしたいのであれば、ANo.1様の様な処理になります。ただ、そちらでも仰られている通り"writing-mode: tb-rl;"はIE以外の環境では無効ですし、「1文字ごとにスペースを空け」たらそれはもう"HELLO"という単語としては認識されなくなってしまいますので、いずれにせよユーザビリティの良い状態ではなくなるという事は覚悟して下さい。
回答ありがとうございます。
うまくいきましたし、
理由も明快で、もう間違えることは、
ないと思います。
スペースを入れて、対応します。
ちなみに、アコーディオンタブの見出しなので、
一行、一単語の縦書きは、やむを得なかった
ところです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テキストエリア内の改行もその...
-
テーブルの幅を固定するとnowra...
-
VC++2005でコードの再フォーマ...
-
<TD><input type="text"></TD>...
-
<br>で改行しても一行あいてし...
-
H1タグに改行の<br>を使う
-
Hタグを改行禁止にしてspanのよ...
-
テーブル内の文字列を改行させたい
-
liタグの自動改行をやめたい!
-
AfterEffectsでイージーイーズ...
-
GoogleChromeでレイアウトが左...
-
aviutlで最後まで動画が読み込...
-
掲示板からIPアドレスってど...
-
品質表示タグが付いてない商品
-
画像の枠にオシャレなフレーム...
-
指定した文字を始点にスペース...
-
XMLを作成してもタグしか表示さ...
-
ウインドウを最前面で固定するタグ
-
リーバイス?
-
店の入口などについている、防...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
H1タグに改行の<br>を使う
-
テーブルの幅を固定するとnowra...
-
\\n \\r \\t について
-
長いURLを途中で改行(折り返す...
-
Hタグを改行禁止にしてspanのよ...
-
テキストエリア内の改行禁止
-
「:」について
-
改行できる・できない入力ボッ...
-
VBE でスペースと改行を見える...
-
文字の最後に半角空白が勝手に...
-
preタグがプロの現場であまり使...
-
PCの画面を縮小したらサイズ...
-
テキストエリア内の改行もその...
-
XMLの改行方法とリンクの仕方
-
liタグの自動改行をやめたい!
-
<br />タグの、brの後の半角ス...
-
<a href="長いURL"> を途中で...
-
高校1年生情報の問題について。
-
<h1>を使っても無改行にするには
-
mailtoで本文に改行を入れたい
おすすめ情報