• ベストアンサー

「white-space: nowrap;」

androidのスマホでCSSの「white-space: nowrap;」が効かなく文字が横に広がります。 どのようにすれば画面内に収まるのでしょうか?

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

white-space:nowrap; 'white-space'( http://www.w3.org/TR/CSS2/text.html#propdef-white-space ) その部分のテキストのlang属性はなんでしょう。 英文の場合は、空白文字で折り返され単語内では改行されません。日本語は任意の場所で折り返されるはずですが、折り返されない場合は、wihite-space:normalのほうが良いでしょう。 また  ⇒The following examples show what white space behavior is expected from the PRE and P elements and the "nowrap" attribute in HTML. ( http://www.w3.org/TR/CSS2/text.html#propdef-white-space )  絶対配置やフロートの場合は改行されません。  もう一度、他のこの部分に継承されるプロパティも含めて再調査する。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • width指定したTDでwhite-space:nowrapが効かない

    width指定したTDでwhite-space:nowrapが効かない ブラウザはIE6~8のみを想定しています。 下記のHTMLでは、2行目は正常なのですが、1行目のnowrapが働かず、改行がかかってしまいます。 列毎に幅を指定する必要があるので、1行目にはwidthを指定しているのですが、 どのようにすれば自動改行を禁止できるでしょうか。 <table style="table-layout: fixed;"> <tr> <td style="width: 50px; overflow: hidden; white-space: nowrap;">あああああああ</td> <td style="width: 70px; overflow: hidden; white-space: nowrap;">あああああああ</td> </tr> <tr> <td style="overflow: hidden; white-space: nowrap;">あああああああ</td> <td style="overflow: hidden; white-space: nowrap;">あああああああ</td> </tr> </table>

    • ベストアンサー
    • HTML
  • nowrapについて教えて下さい。

    私は、インターネットエクスプローラ(IE)6を使っているのですが、いろんなパソコン(ブラウザ)でも見られるようなHP作りたいと頑張っています。 今、テーブルタグを使い、枠ナシの表を作っています。 これだと文字のずれが少ないと思ったからです。 しかし、文字表示のサイズを変えて、セル幅より広くなってしまると、セルないで文字が改行されてしまい、見づらくなる事がわかりました。 そこで、このnowrapを使おうと思ったのですが、参考にしている本では、nowrapは非推奨となっていました。 さらにcssは『style="white-space: nowrap』IE6、NN6以上しか使えないようなことも書かれていました。 どんなパソコン及びブラウザでも、表内で改行されないようにする方法はあるのでしょうか? よい方法がありましたら教えて下さい。 よろしくお願い致します。

    • ベストアンサー
    • HTML
  • CSSのwhite-spaceプロパティについて

    CSSのwhite-spaceプロパティの意味がわかりません。まず、「半角空白、改行、タブ...msmssatさん CSSのwhite-spaceプロパティの意味がわかりません。まず、「半角空白、改行、タブ」という言葉が出てきますが「タブ」とはなんなのかがわかりません。 そしてwhite-spaceプロパティには、normal,pre,nowrapと3つの値があるようですが、その違いが何なのかがわかりません。 ネット上で調べたのですが、どのような違いがあるのかがわからないのです。 CSS初心者です。 是非、お知恵を頂きたいと思っております。わかりやすくご説明をお願いします。 なお、Webクリエイター上級試験の勉強を独学でしております。 そのために、ご協力ください。 大変恐縮ですが、よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • span要素にのみwhite-space: nowrapを指定したい

    CSSによる改行指定が思う様にできなくて困っています。 幅400pxのボックスの中で、<span>~</span>の間では改行せず、</span>と<span>の間で自動改行するようにしたいと考えています。 スタイルシートに div{width:400px;} span{white-space: nowrap;} HTMLに <div> <span>type1</span><span>type2</span><span>type3</span>... </div> のように表記したのですが、実際にはdivで指定した幅を無視してどこまでも改行なしで表示されてしまいます。 どのように指定すれば目指している形にできるでしょうか?

    • ベストアンサー
    • HTML
  • 自動改行無し、スペースまとめも無し。

    テキストと罫線のみで以下のようなツリー構造の表を作ろうとしています (アンダーバーの部分は本来はスペース) ○○○○━┳━○○○━┳━○○○○○ _____┃_____┗━○○○○ _____┃ _____┗━○○○━┳━○○○○○ ___________┣━○○○○ ___________┗━○○○○ 本来はもっと規模の大きなものなのですが簡略化しました。 問題にしているのはウィンドウ端とスペースの処理です。 CSSを調べたのですが、『white-space:nowrap』では自動改行しない代わりにスペースはまとめられてしまいます。 自動改行なし、スペースはまとまらない、と両者を同時に成立させるにはHTMLやCSSをどう記述すると良いのでしょうか? ちなみに、自分で見るためだけに使う仮のファイルなので、ソースの美しさなどは特に気にしません。 また<pre>タグは罫線同士の間に隙間が空いてしまうので使いたくありません。

    • ベストアンサー
    • HTML
  • html上で改行するとスペースが空く現象

    <p> あああ いいい </p> とhtmlに書くとブラウザでは『あああ(半角スペース)いいい』となります。 改行を入れなければ問題ないのですがあまりにもテキストが長い場合など可読性を 考慮すると改行を入れたくなります。 bodyにwhite-space: nowrap;を指定すると<br />も無視されてしまうので困っているのですが 半角スペースをなくするにはどのように対処すればいいでしょうか?

    • ベストアンサー
    • HTML
  • 文字間にスペースを開けるには?

    色々試してみてだめでしたらので質問致します。 動作環境:IE7.FireFox3 商品名:○○○○ 型□番:△△△△ ※□の場所に空白。 ※上の三文字と揃うように。 css.htmlどちらを使用してもよいのですが 下記は試した結果です。 <pre>~</pre> IEで文字が縮小されるので駄目 style="white-space:pre;" FireFox側が認識せず style="letter-spacing:1em;" IEだとOK FireFoxだと最後の文字の後ろにもスペースがつく 何かよい解決策はないでしょうか? よろしくお願い致します。  

    • ベストアンサー
    • HTML
  • eclipsのホワイトスペースで

    MACでの話なのですが、OSの変更に伴いphpの開発環境をeclipsにする必要にせまられています。eclipsに詳しい方がいれば教えてください。 eclips上のテキストエディターでホワイトスペース表示を行うとグレーの「.」が表示されます。phpは「.」が結合子なので、編集中にとまどい、できれば「_」など、ホワイトスペース表示に別な表記を選びたいのですが、そんなこと可能なのでしょうか? 色変えで対処してみたのですが、さすがに「.」はキャラクターが小さすぎて色の判別しづらく、困っています。 OS Mac OS X v10.6 Snow Leopard eclips 3.5 Galileo を日本語にして aptanaを追加しています。

    • 締切済み
    • PHP
  • このようなCSS指定はできますか?

    以下のようなスペース区切りの文字列があります。 これらを単語を途中で改行させず、単語の頭から改行させる CSSの指定方法はありますでしょうか? 単語をspanで囲みnowrapを使ったのですが、単語の途中で改行 されないかわりに画面からはみ出してしまいました。 どうかよろしくお願いいたします。 あああああ いいいいい ううううう えええええ

    • ベストアンサー
    • CSS
  • モバイルXHTMLでのau mode="nowrap"について

    はじめまして。 auとSoftBankの一部の端末で対応しているmode="nowrap"というタグですが、下記のコーディングで動きません。。 <div mode="nowrap">スクロールする文字列</div>又は、 <p mode="nowrap">スクロールする文字列</p> ※現在作成しているモバイルサイトはXHTMLBasicに対応させるように作成してあります。 もしかして上記タグはHTML用のタグでXHTMLには対応していないのでしょうか?auの開発者用サイトで探せなかったので、すみませんが教えていただけると助かります!