人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

サイト作成で、改行してない長文を表示させると、
デザインが崩れます。

例えば

〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜・〜

こういうのを表示すると、スタイルシートでwidth=300とやってても、
改行されずに1行で表示されてしまい、300以上の横幅になって崩れます。

これを解決する方法はないのでしょうか?

これらの文字列の表示を前提として、
2カラムなどでどう崩れないようにするか知りたいです。

●質問者: onigirin
●カテゴリ:インターネット ウェブ制作
✍キーワード:カラム サイト スタイルシート デザイン 作成
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● Q-A
●16ポイント

width=300

これはhtmlの書き方です。


cssだと

width:300px;/* 単位は省略できない。他に%やemがある */

となります。


それと、英文などは1単語を行末と行頭で切らないという約束があります。意味が違ってしまいますので。いま例示の「〜・〜」も同じ仲間です。ですから、サンプルなどを作るときは「ああああ」等で実験されるといいと思います。

<div>あああああ</div>

<div>いいいいい</div>

として

スタイルシートの場所で

div{width:45%;float:left;}

とか

div{width:200px;float:left;}

などと幅を指示すると2段になると思います。

◎質問者からの返答

ありがとうございます。

幅はしていますが、うまく表示されないでした・・・。


2 ● imo758
●16ポイント

IE限定ですが、こちらをどうぞ。

http://www.google.com/search?hl=ja&client=opera&rls=ja&hs=UM2&q=...

cssで word-break: break-all; を指定すると

IEの特定バージョンではどの言語のどの文字の間だろうと改行するようになります。

あとよく読んでないのですが、なんかこのへん

http://piro.sakura.ne.jp/latest/2005/06.html#d28

にFireFoxでのいろんな奮闘振りが書いてあるような…

まあHTMLをプログラムに通して、長い単語があったら

途中にを挟むとかという手法もあるでしょうか…

その場合、どうやって非改行文字連続を検出するのかが

課題でしょうか

◎質問者からの返答

ありがとうございます。

うまい解決法はまだないようですね・・・。


3 ● drowsy
●48ポイント ベストアンサー

〜・〜・〜・〜・〜とか○○○○○○、

HHHHHHHHHHHHHHHHHHHHHHなどは

一つの単語としてみなされるので改行しません。


divにoverflow: hidden; とかを設定して溢れた部分を非表示に

したらレイアウトは崩れないと思います。

検証してないのですべてに対応できるかどうかは分かりません。

(hatenaでもこの質問は崩れてますね…)

◎質問者からの返答

どうもありがとうございます。

この方法で、「レイアウト崩れ」自体は解決しました!

どうも改行できないようなので、これでいこうと思います。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ