例えば、
<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で質問しましょう!
似たような質問が見つかりました
- 婚活 マッチングアプリってすぐ会わないとダメなの 4 2023/06/18 22:25
- その他(車) 現行アウディTT RSオーナーは金持ち? 4 2022/04/28 15:39
- カップル・彼氏・彼女 高一女です。 女子の割合が多い高校で彼氏作る方法教えてください(TT) 2 2022/04/12 17:24
- その他(車) 35GT-R と Audi TT RS 維持費は天と地の差ですか? 1 2023/01/25 15:51
- カップル・彼氏・彼女 推しの彼氏の違いなんですか(TT) 分からなくて。 4 2022/08/05 01:02
- 薄毛・抜け毛 このつむじは治療レベルですか? 泣きそうですTT 4 2023/04/23 17:13
- iPad どなたか、詳しい方教えてください。途方にくれています。 友人からもらったiPadmini 初代につい 4 2022/04/07 11:04
- スキンケア・エイジングケア どちらの写真のほうが若く見えますか? 理由も添えて教えて頂きたいです(TT) 3 2022/07/28 02:51
- デート・キス 彼女とキスや手繋いでるだけでちょっと棒が反応しませんか? 勝手に動きやがって....TT 7 2023/07/08 18:02
- 扇風機・冷風機・サーキュレーター 東芝ルームエアコンディショナras-2854dのカバーの外し方 1 2022/06/23 04:59
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テキストエリア内の改行禁止
-
H1タグに改行の<br>を使う
-
<br style="clear:both;">って...
-
liタグの自動改行をやめたい!
-
テーブルの幅を固定するとnowra...
-
preタグがプロの現場であまり使...
-
html上で改行するとスペースが...
-
<br />タグの、brの後の半角ス...
-
「:」について
-
mailto:のリンクで、本文を改行...
-
CSS中で,/*と*/で囲まれた範囲...
-
<a href=... title="ここ">の部...
-
mailto:メール本文内の改行方法
-
<TD><input type="text"></TD>...
-
長いURLを途中で改行(折り返す...
-
アコーディオン仕様の中の ul l...
-
改行できる・できない入力ボッ...
-
テキストエリアの幅を10桁まで...
-
ページ下部のDIV要素下部に不要...
-
PCの画面を縮小したらサイズ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
H1タグに改行の<br>を使う
-
テキストエリア内の改行禁止
-
\\n \\r \\t について
-
長いURLを途中で改行(折り返す...
-
テーブルの幅を固定するとnowra...
-
<a href=... title="ここ">の部...
-
改行できる・できない入力ボッ...
-
文字の最後に半角空白が勝手に...
-
PCの画面を縮小したらサイズ...
-
<TD><input type="text"></TD>...
-
テーブル内の文字列を改行させたい
-
テキストエリア内の改行もその...
-
Hタグを改行禁止にしてspanのよ...
-
XMLの改行方法とリンクの仕方
-
html上で改行するとスペースが...
-
preタグがプロの現場であまり使...
-
「:」について
-
<a href="長いURL"> を途中で...
-
Windowsのformでtextareaに入力...
-
liタグの自動改行をやめたい!
おすすめ情報