掲示板/総合質問板/過去ログ/一覧/ スタイルシート　文字数によって横幅が伸びてしまいます。

0 名前：たあ： 2006/11/06（月） 03:27 ID:JMOJJQ3F: 例えばwidth: 100pxのボックスを作っても，ボックス内の文字数（改行を入れずに）を多くすると，ボックスが横に広がってしまいます。これは当然のことなのでしょうか。
この現象をoverflow: scroll;などを使わずに回避するためには，どうすればいいんでしょうか？
横幅を考えながら改行をするのは非常に面倒で，皆さんがそうしているとは思わないのですが。

1 名前：元帥： 2006/11/06（月） 03:27 ［URL］ ID:24YD76Dk: 余計な設定を行わなければ、自動で折り返される筈です。
ブラウザによってはバグがあるかもしれませんし、ハイフネーションが実装されていないためにそうなってしまう可能性も考えられます。

閲覧環境とソースコードを提示すれば誰かが検証してくれるかもしれません。

2 名前：たあ： 2006/11/06（月） 03:27 ID:JMOJJQ3F: 回答くださいましてありがとうございます。

＞閲覧環境とソースコードを提示すれば
ＣＳＳ部分
.base{
width : 750px;
height : 90%;
margin : 0px;
padding : 0px;
bordder : 0px;
background-color : #000000;
}
.header{
width : 750px;
height : 50px;
margin : 0px;
padding : 5px
border : 0px;
background-color : #000080;
}

.left{
width : 230px;
height : 100%;
background-color : #ffffff;
padding : 5px 5px 5px 5px;
float : left;
border-right : 1px #000000 solid;
}
.right{
width : 520px;
height : 100%;
background-color : #ff0000;
padding : 5px 5px 5px 5px;
float : left;
}

.footer{
width : 750px;
height : 50px;
margin : 0px;
padding : 5px
border : 0px;
background-color : #000080;
}

html部分
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE></TITLE>
<LINK rel="stylesheet" href="style.css" type="text/css">
</HEAD>
<BODY>
<div class="base">
<div class="header"></div>
<div class="left"></div>
<div class="right"></div>
<div class="footer"></div>
</div>
</BODY>
</HTML>

こんな感じでよろしいでしょうか？
環境はＩＥ６です。

3 名前：元帥： 2006/11/06（月） 03:27 ［URL］ ID:83qhKOXR: 適当な文字（あああ）を入力してみましたがやはり自動で折り返されます。
現象が再現する最低限のソースを提示して頂けないでしょうか？

4 名前：たあ： 2006/11/06（月） 03:27 ID:sMse/8di: 元帥さんありがとうございます。
もっとシンプルなものでもテストしてみました。
これでも，やはり折り返されず，伸びていきます。ちなみに文字を入れない状態ではちゃんと１００ｐｉｘ
で表示されていると思います。
よろしくお願いします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE></TITLE>
<link rel="stylesheet" href="testcss.css" type="text/css">
</HEAD>
<BODY><div class="box1">1111111111111111111111</div></BODY>
</HTML>

.box1{
width : 100px;
border : 1px #000000 solid;
}

5 名前：たあ： 2006/11/06（月） 03:27 ID:sMse/8di: たぶん解決できました。
上にも書きましたように，いつも半角英数を入れて確認していたのがだめなようです。
普通の文字を入れると大丈夫なことがわかりました。初心者板に書いておいて正解でした。
私の考えが正しいとしても疑問は残ります。英語のページとかはどうするんでしょう？

ありがとうございました。

6 名前：元帥： 2006/11/06（月） 03:27 ［URL］ ID:LnXsDgr8: IEでは勝手に広がってしまいますし、NNでは文字列がはみ出てしまいますね。
英文等をお読みになるとお分かりかと思いますが、単語の途中で改行される事はまずありません。
単語の間隔が調整されるか、ハイフネーションが行われます。

多分まだIEにしか実装されていないと思いますが、word-breakを指定するのも良いでしょう。
http://www.htmq.com/style/word-break.shtml

Firefoxでは対策スクリプトが用意されています。
http://www.koikikukan.com/archives/2005/08/04-235647.php

サーバーサイドやJavaScriptを用いて、適当な位置に改行を挿入する方法もありますが、音声読み上げブラウザ等は意味を違えて発音する可能性がある事に注意して下さい。
文字列がURLでしたらtext-overflowさせても良いかもしれません（長いURLは検索結果である事が多いので、エンコードされた検索文字列をそらで解読できる人はあまりいないでしょうから、見えなくても問題ないと思います）。

> 英語のページとかはどうするんでしょう？

半角が連続した場合に折り返されないのですから、ボックスが適度に広く、単語が適度に短ければ問題ないと思います。
単語と単語はスペースで区切られるので、それを目安に適当に改行される筈です。
日常的に使用される文章なら問題ないのでしょう。

蛇足：世界一長い英単語
http://takech.fc2web.com/language/e-01.html

スタイルシート 文字数によって横幅が伸びてしまいます。

スタイルシート　文字数によって横幅が伸びてしまいます。