文字が勝手に改行されます。

質問

文字が勝手に改行されます。

HTML初心者です。

<p>～</p>などで文章を打つと、ブラウザ(firefox 3.6,IE 8で試したっ結果)
のウィンドウを小さくした際、勝手に改行されてしまいます。この状況を
改善するにはどうしたらよいでしょうか。

理想としては、ブラウザのウィンドウの大小に依存しないようにしたいのですが。

回答No.1

aurumnet · ベストアンサー

<nobr>～</nobr>
で囲ってみてください
あまり横スクロールするホームページは好まれませんので気をつけてつかってください。

お礼

"nobr"というタグは知りませんでした。勉強不足です・・・。
確かに、縦に比べて横はめんどくさいですもんね。

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

回答No.6

scorpion2009

このOKwaveのページは、ウィンドウサイズを小さくしても質問や回答が改行されませんよね。
このようにしたいと言うことでしょうか？

　もしそうならば、このページのソースを見ることをお勧めします。
このページの場合には、２カラム構造で、左側がok_area_l，右側がok_area_r
この２つを内包するok_wrapperでそれぞれグループ化されています。
　スタイルシート(layout.css)を見るとそれぞれ横幅が固定値で指定されています。
従って結論としては
<p>～</p>の親タグで横幅を固定値にすれば大丈夫な事が分かります。
＝＝＝回答例＝＝＝
<style type="text/css">
#contents{ width: 400 px; }
</style>
<div id="contents">
<p>記事、記事、記事・・・・</p>
</div>
＝＝＝＝＝＝＝＝＝＝＝＝

お礼

なるほど、css内でwidthが固定されていたんですね。
丁寧な回答ありがとうございました。

回答No.5

black-magic

＞４
★幅が狭い、あるいは目が悪くて大きなフォントにしてもきちんと【折り返して】ウィンドウ横幅に収まるように表示されるように作成すべきものなのです。★

それなら、画像ファイルを置けないな。
横幅100ピクセルのimgタグを置いたら、100ピクセル以下のウィンドウサイズにすると横スクロールが出てしまう。
あ、長い英単語も記入しちゃダメだ。
スペースやハイフン、区切り候補入れとかないと幅を狭くすると横スクロールが出てしまう。

にあるソース(全角スペースは削除して)を表示させてごらんなさい。幅800でもそれより大きなウィンドウでも利用できます。それがHTML

ん？サンプルは横幅500ぐらいにすると、横スクロールバーが出るぞ、ダメだこりゃってか？

いやいや、イチャモンだってことは判って書いてますよ。
実際問題、どうやっても横幅300ピクセルぐらいで、横スクロールバーは出てしまうんだな。
そして、Webページってのは見た目、デザインも重要なんだな。
画面サイズで横幅800環境をサポートするとして、そのサイズ以下でデザインが崩れて読みにくくなるようであれば、逆にスクロールバーを出して読みやすくしなければいけないんだな。
サンプルは横に並べて見やすく(読みやすく)するってサンプルだから、ウィンドウサイズを横幅500ピクセル以下にして、レイアウトが崩れて横に並ばない、見にくいって事になると横スクロールバーを出さない事にこだわるのは本末転倒なわけなんだな。
だからサンプルの仕様では横スクロールバーを出すのが正しい。

横スクロールバーを出さない方が読みやすい、だから横スクロールバーが出ないようにレイアウトする。
横スクロールバーを出さないと逆に読みにくくなるような極端な設定のユーザがいた場合、横スクロールバーを出して読みやすくする。
それがWebページ

画面サイズで、幅800以上で見る事を想定したとして、それ以下の幅でレイアウトが壊れとても読めないというような、ユーザを切り捨てるような事はしてはいけない。
不本意でも、横スクロールバーを出してまともに見れるようにしなければならない。
それがWebページ

お礼

長文ありがとうございます。
バーを出す、出さないでそれぞれ使い分けて
デザインしなければならないんですね。難しい・・・

回答No.4

ORUKA1951

＞理想としては、ブラウザのウィンドウの大小に依存しないようにしたいのですが。
　はHTMLではなく、PDFなどそのための方法があります。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
PDFのドキュメントは、Adobe Readerがインストールされているコンピュータであれば元のレイアウトどおりに表示・印刷できる。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Portable Document Format - Wikipedia( http://ja.wikipedia.org/wiki/PDF#PDF.E3.81.AE.E7.89.B9.E9.95.B7 )］より

＞HTML初心者です。
　なら、最初にここだけは勉強してください。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より
　ワードやDTPで作成されたページは、同じOS、同じフォント、同じアプリケーションのインストールされているコンピューター出ないと利用できませんが、HTMLで作成されたページは、どのような端末、幅の狭い、あるいはひろいウィンドウだけでなく、読み上げソフト、点字端末、あるいは携帯端末でも利用できるようにするための物ですから、
★幅が狭い、あるいは目が悪くて大きなフォントにしてもきちんと【折り返して】ウィンドウ横幅に収まるように表示されるように作成すべきものなのです。★
　そのために、HTMLを使う。HTMLが登場したからインターネットの世界は発達した。

　これだけは絶対に理解しておいてください。!!!
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

★ここで、HTMLを正しく理解しておかないと、とっても困ります。上記仕様書のページだけは目を通しておくことを勧めます。
2.2 HTMLとは何か? ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2 )

サンプル)先日投稿した記事ですが・・
文字の入るスペースの、縦方向の位置調整 - 教えて！goo ( http://oshiete1.goo.ne.jp/qa5759104.html )
　にあるソース(全角スペースは削除して)を表示させてごらんなさい。幅800でもそれより大きなウィンドウでも利用できます。それがHTML

お礼

なるほど。携帯端末などの小さなウィンドウでしか表示できないときは
逆に不憫になる場合もあるのですね。

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

回答No.3

BellBell

こんなのはどうですかね。
400pxの部分は必要に応じて変更してもらって。
ウィンドウの(内部の)サイズを400px以下になるほど小さくした場合に、それ以上小さくはならないように指定。
ウィンドウ内に、横スクロールバーが表示されます。

<div style="min-width:400px;">
ほげほげ
いろはにほへとちりぬるを わかよたれそつねならむ うゐのおくやまけふこえて あさきゆめみしゑひもせすん
</div>

min-width:400px;ではなく、width:400px;で固定(ウィンドウ幅を広げても400px固定)でもいいですが。

お礼

"min-width"なんてリファレンスがあるんですね。
まだまだ勉強不足でした。コレなら、必要に応じて
改行、固定ができますね。

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

回答No.2

noname#198951

<nobr>～</nobr>で囲むと改行禁止になります。
nobrはNO BReak の略で改行禁止の意味です。

ただ、ユーザーにスクロールを要求するというのはあまり優しいページとは言えないですね。

お礼

他の人の回答も見てみると、やはり
横スクロールはあまり喜ばれないみたいですね。
必要に応じて使っていこうと思います。

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