
例えば、
<div style="width:200px; background-color:yellow;">
ttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
</div>
とした場合、字列が折り返されず、幅がどんどん伸びてくんですが、
<div style="width:200px; background-color:yellow;">
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</div>
とした場合は、字が折り返されて、幅が固定されます。
ひらがなと英字を混ぜて、
<div style="width:200px; background-color:yellow;">
ああtttttttttttttttttttttああああああああああああaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaああああああああああああああああああああaaaaaaaaaaaaaaああああああああああああああああああああああああああああああああああああああああああああ
</div>
としても、英字が長く続いている分だけ幅が伸びていくようでした。
英字があっても、幅が固定されて、折り返されるようにしたいのですが、
どなたか良い方法があれば教えてください。
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
折り返されないようにするには#02さんや#03さんの通りに行うとよいと思います。
もし、ただ指定した幅をはみ出すのが困るというだけならばoverflowを使用してみてはいかがでしょうか。(指定した幅がはみ出したらスクロールバーが表示されるようにする)
No.3
- 回答日時:
他の回答者様やANo.1で参照されている別スレッドでのコメント通り、1バイトの英字がスペースなく連続していれば、ブラウザ側はそれをワン・ワードとして解釈しますから、質問者様の仰る様な現象が起きるのは”当然”の事となります。
CSSにもワープロ・ソフト系にある様なワードラップ機能に当たる"word-break"というプロパティもあるにはあるのですが、IE独自の仕様の為、IEでのみ有効となります。
【参考】
http://www5e.biglobe.ne.jp/~access_r/hp/css/css_ …
http://pinotan.blog15.fc2.com/file/word-break.html
ANo.2様の仰る通り、現実にはそんなに長い単語はありませんので、余程特殊なデータを表示させたいのでもない限り、あまり考慮されなくても宜しい問題かと。
No.2
- 回答日時:
> 英字があっても、幅が固定されて、折り返されるようにしたいのですが、
> どなたか良い方法があれば教えてください。
実用上、あまり問題無いと思います。
質問者様は
「ttttttttttttttttttttttttttttttttttttttttttttttttttt」
こうすると改行されないと書いてありますが、
実際にはこんな長い単語はそうそうありません。
途中にブランクを入れれば問題ないでしょう。
但し、例として1行目にあと5文字分のスペースが残っているところに
6文字の単語を入れますと、1行目は5文字空いたままで
次の2行目に改行され、改行されたアタマに6文字の単語が入ります。
これは漢字などの全角を含んだ文章でも、
行の終わりに半角の英単語を持ってくれば同じことが起こります。
アルファベットをHTMLの文章に入れる場合、
デコボコしないようにうまく文章を組むのも
ホームページ作成者の腕のうちです。
場合によっては<br>タグを使い、強制改行したほうが見やすい場合もあります。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Windowsのformでtextareaに入力...
-
mailtoで本文に改行を入れたい
-
Hタグを改行禁止にしてspanのよ...
-
H1タグに改行の<br>を使う
-
\\n \\r \\t について
-
「:」について
-
高校1年生情報の問題について。
-
preタグがプロの現場であまり使...
-
<br style="clear:both;">って...
-
テキストエリア内の改行禁止
-
長いURLを途中で改行(折り返す...
-
<br />タグの、brの後の半角ス...
-
テーブルの幅を固定するとnowra...
-
エクセルVBA テーブルのフィー...
-
span要素にのみwhite-space: no...
-
テキストエディタで文字列を揃える
-
<h1>を使っても無改行にするには
-
XMLの改行方法とリンクの仕方
-
ブラウザサイズ変更時のテキス...
-
なぜか<p> </p>が挿入され...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Hタグを改行禁止にしてspanのよ...
-
H1タグに改行の<br>を使う
-
\\n \\r \\t について
-
Windowsのformでtextareaに入力...
-
高校1年生情報の問題について。
-
長いURLを途中で改行(折り返す...
-
改行できる・できない入力ボッ...
-
テキストエリア内の改行もその...
-
VBE でスペースと改行を見える...
-
テーブルの幅を固定するとnowra...
-
XMLの改行方法とリンクの仕方
-
「:」について
-
Dreamweaverの改行コードをLFに...
-
アコーディオン仕様の中の ul l...
-
テーブルのセルデータを自動改...
-
Dream Weaverの改行時にTabキー...
-
テキストエリア内の改行禁止
-
改行が変な位置、中途半端な位...
-
mailtoで本文に改行を入れたい
-
テキストエリアの幅を10桁まで...
おすすめ情報