CSSについての質問です。


ボックスからはみ出るものを制御するのに
通常はoverflowを使用すると思うのですが
希望するような動作ができません。

やりたい内容は
横幅を固定し、はみ出した内容に応じて
ボックスの縦長が伸びるというものです。

たとえば1000文字の改行なしというデータがあったとしても
幅は変えずに縦にぐいっと伸びていくようなものです。

これをCSSで実現できないでしょうか。
無理であれば代替方法を教えてください。

回答の条件
  • 1人5回まで
  • 登録:2006/05/29 00:22:06
  • 終了:2006/05/31 12:10:51

ベストアンサー

id:ogrenavi No.5

ogrenavi回答回数161ベストアンサー獲得回数92006/05/31 11:47:37

ポイント30pt

【前提:連続する半角英数字が改行されない】--------------------------

通常、テキストは右端で折り返しされるはずですが、URL (URI) 等の連続する半角文字は一つの単語と扱われ、

折り返さない場合が多いです。

つまり、1の方が言っている

>"aaaaaaaaaaaaaaaaaaaaaaaaa"はコンピュータからみれば一つの単語で、途中に改行が入ることが許されません。

ということです。

参考資料:

・半角文字列の折り返し(ブラウザ毎の比較があります)

http://pinotan.blog15.fc2.com/file/word-break.html


【通常の対処方法】-------------------------------------------------

1. htmlタグbrで強制改行。

2. はみ出し部分をCSS(overflow:hidden)で切り落とす。(IE6は親ボックスの幅が広がるバグがあるので、widthで直接的に幅を指定しないと効かない)

3. CSSにword-break:break-allを指定し、IEだけ右端で改行。(ボックス幅の広がりを防げるが、単語区切りにならず英数字が読み辛い)

4. CSSにword-break:keep-allを指定し、IEだけ右端で改行。(単語区切りのみで改行。区切りが無いと全角でも改行されない)

5. 区切り記号を全角にする。(稀に折り返さないケースもある)

6. 半角記号を空白(スペース)で挟む。

7. 単語の区切りなどに<wbr>(<wbr />)を入れる。

参考資料:

7以外は以下の引用です

http://pinotan.blog15.fc2.com/blog-entry-106.html


Firefoxの場合、折り返すようにする拡張機能(url_breaker、url_breker_plusもしくはGreaseMonkeyを使う方法)があります

ただ、この場合、ユーザーにインストールしてもらわないといけないので、

入れていない人にも効かせて欲しい場合は、これをjs化することで対応できます。

参考資料:

Firefox・Netscapeで連続した半角文字を折り返す

http://www.koikikukan.com/archives/2005/08/04-235647.php



【ということで、今回の場合は】-------------------------------------------------

・CSSにword-break:break-allを指定し、IEだけ右端で改行。

・NetscapeやFirefoxのために、jsファイルで<wbr> を挿入する

この2つを併用すればいかがでしょうか?

<wbr>もしくは半角空白を一定挿入するphpスクリプトを書いてもよいかと思います。

その他の回答(4件)

id:kazu1107 No.1

kazu1107回答回数199ベストアンサー獲得回数142006/05/29 00:42:43

ポイント20pt

どのような内容を表示させようとしてるのかがわからないのですが、

"overflow:auto;"とすることで、必要に応じたスクロールバーの表示ができ、widthを設定することで実際のボックス幅、heightなら高さを設定できます。

しかし、たとえば以下のような場合うまくいきません。

"<div style="overflow:auto;width:100px;">aaaaaaaaaaaaaaaaaaaaaaaaa<>

"aaaaaaaaaaaaaaaaaaaaaaaaa"はコンピュータからみれば一つの単語で、途中に改行が入ることが許されません。

CSSのテスト時によくやる事ですが、ためしに"ああああああああああ"などといれてみれば勝手に改行されているかと思います。

もし的はずれな回答なら、

>希望するような動作ができません。

に対してもうすこし具体的に「どんな表示になるのか」書いてもらえると原因がわかるかもしれません。

id:e23jp

そうですね。少し説明が足りませんでした。

想定しているのはaaaaaaaのほうです。

というか、どんな文字であっても改行して欲しいというのが希望です。

また、スクロールバーはデザイン上でて欲しくありません。

また、autoにするとブラウザごとに挙動が違いそうで避けたいです。

横幅は固定・スクロールバーは出ない・

縦は可変。

こういうことですが、わかりにくいですかね。

うーん。しかしaaaaaができないとなるとphpか何かでチェックして改行文字を入れるとかのほうがいいんでしょうかね・・・。

2006/05/29 00:46:50
id:kn1967 No.2

kn1967回答回数2915ベストアンサー獲得回数3012006/05/29 00:43:37

ポイント10pt

Netscape/Firefox系はDIVで使うなどの注意が必要ですが、基本としては overflow: auto で対応できるはずですよ。

id:kn1967 No.3

kn1967回答回数2915ベストアンサー獲得回数3012006/05/29 00:58:54

ポイント20pt

overflow: autoのブロックを overflow: hidden のブロックで囲んでしまうという手とIE対策としてword-break:break-allという手を併用するという手は?

id:kazu1107 No.4

kazu1107回答回数199ベストアンサー獲得回数142006/05/29 01:05:43

ポイント20pt

極端に長すぎる英単語が入る文章の場合は、IE/Firefox/Operaなどのブラウザの違い。overflow:auto;の指定・未指定に関わらず、変な表示になるものです。あきらめるしかないのではないでしょうか・・・?

英単語の場合は改行も一つのスペースとして見なしてしまうので途中改行出来ない仕様になってるはずで、これはWordなどの文章編集ソフトも同じです。(単語を途中で改行してしまうのは英語の文章としては不適切。)

id:ogrenavi No.5

ogrenavi回答回数161ベストアンサー獲得回数92006/05/31 11:47:37ここでベストアンサー

ポイント30pt

【前提:連続する半角英数字が改行されない】--------------------------

通常、テキストは右端で折り返しされるはずですが、URL (URI) 等の連続する半角文字は一つの単語と扱われ、

折り返さない場合が多いです。

つまり、1の方が言っている

>"aaaaaaaaaaaaaaaaaaaaaaaaa"はコンピュータからみれば一つの単語で、途中に改行が入ることが許されません。

ということです。

参考資料:

・半角文字列の折り返し(ブラウザ毎の比較があります)

http://pinotan.blog15.fc2.com/file/word-break.html


【通常の対処方法】-------------------------------------------------

1. htmlタグbrで強制改行。

2. はみ出し部分をCSS(overflow:hidden)で切り落とす。(IE6は親ボックスの幅が広がるバグがあるので、widthで直接的に幅を指定しないと効かない)

3. CSSにword-break:break-allを指定し、IEだけ右端で改行。(ボックス幅の広がりを防げるが、単語区切りにならず英数字が読み辛い)

4. CSSにword-break:keep-allを指定し、IEだけ右端で改行。(単語区切りのみで改行。区切りが無いと全角でも改行されない)

5. 区切り記号を全角にする。(稀に折り返さないケースもある)

6. 半角記号を空白(スペース)で挟む。

7. 単語の区切りなどに<wbr>(<wbr />)を入れる。

参考資料:

7以外は以下の引用です

http://pinotan.blog15.fc2.com/blog-entry-106.html


Firefoxの場合、折り返すようにする拡張機能(url_breaker、url_breker_plusもしくはGreaseMonkeyを使う方法)があります

ただ、この場合、ユーザーにインストールしてもらわないといけないので、

入れていない人にも効かせて欲しい場合は、これをjs化することで対応できます。

参考資料:

Firefox・Netscapeで連続した半角文字を折り返す

http://www.koikikukan.com/archives/2005/08/04-235647.php



【ということで、今回の場合は】-------------------------------------------------

・CSSにword-break:break-allを指定し、IEだけ右端で改行。

・NetscapeやFirefoxのために、jsファイルで<wbr> を挿入する

この2つを併用すればいかがでしょうか?

<wbr>もしくは半角空白を一定挿入するphpスクリプトを書いてもよいかと思います。

コメントはまだありません

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

トラックバック

  • FrontPage PukiWiki Plus! (PukiWiki/TrackBack 0.3) 2012-10-27 17:51:09
    スタイルシートを使ったホームページ作成♪初心者向けCSS入門講座 http://2004.lolipop.jp/else/css/css.html 基礎 ボックスモデル paddingとmargin padding margin スタイルシートだけで段組を作る方
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

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

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