サイト作成で、改行してない長文を表示させると、

デザインが崩れます。

例えば

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

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

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

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

回答の条件
  • 1人3回まで
  • 登録:2007/12/12 17:16:21
  • 終了:2007/12/12 18:32:20

ベストアンサー

id:drowsy No.3

drowsy回答回数1163ベストアンサー獲得回数882007/12/12 18:05:16

ポイント48pt

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

HHHHHHHHHHHHHHHHHHHHHHなどは

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


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

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

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

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

id:onigirin

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

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

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

2007/12/12 18:11:06

その他の回答(2件)

id:Q-A No.1

Q-A回答回数106ベストアンサー獲得回数162007/12/12 17:38:39

ポイント16pt

width=300

これはhtmlの書き方です。


cssだと

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

となります。


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

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

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

として

スタイルシートの場所で

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

とか

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

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

id:onigirin

ありがとうございます。

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

2007/12/12 18:20:04
id:imo758 No.2

imo758回答回数121ベストアンサー獲得回数192007/12/12 17:46:22

ポイント16pt

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をプログラムに通して、長い単語があったら

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

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

課題でしょうか

id:onigirin

ありがとうございます。

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

2007/12/12 18:20:41
id:drowsy No.3

drowsy回答回数1163ベストアンサー獲得回数882007/12/12 18:05:16ここでベストアンサー

ポイント48pt

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

HHHHHHHHHHHHHHHHHHHHHHなどは

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


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

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

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

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

id:onigirin

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

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

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

2007/12/12 18:11:06
  • id:kappagold
    はてなでも崩れている・・・。
  • id:fuk00346jp
    だな・・・
  • id:drowsy
    文字があふれるのが問題ではなくて、「〜・〜・〜・〜」こういう模様みたいなものが表示させたいのだという質問として答えてしまいました…。
  • id:onigirin
    できれば、こういう文字列を指定した横幅に合わせて表示させたいのですが、
    とりあえず隠すことで崩れること自体は解決して、一歩進みました。
  • id:imo758
    模様として使いたいのなら「~・」を画像としてもっておいて
    background-repeat: repeat-x;
    を使うのがスマートだと思いますが…
    http://www.ne.jp/asahi/minazuki/bakera/html/css/colors
  • id:onigirin
    どうもありがとうございます。
    既にこういうデータが入っていて、それを表示しなければいけない、という状態なんです。

    そのため、とりあえずレイアウトさえ崩れなければ、なんとかなりました。
    根本的な解決はしてませんが・・・。
  • id:imo758
    根本的な対策が取れないのは辛いですね…
  • id:lunlumo
     こんな感じでしょうか。

    >|html|
    <div style="height:100px">
    <div style="width:100px;height:100%;float:left">test</div>
    <div style="width:300px;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word">~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~</div>
    </div>
    ||<

    http://myy.helia.fi/~karte/pre-wrap-css3-mozilla-opera-ie.html
  • id:lunlumo
     上のコメントで書いた内容間違ってますねぇ...。よくまとまったページを見つけたのでこちらを紹介しておきます。

    http://archiva.jp/web/html-css/20060808013000.html

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません