5

段落にかなり長い行がいくつかあるとします。

<div style="overflow: auto"> 
    <p> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccccccccc
    </p> 
    <p> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccccccccc
    </p> 
</div>

ウィンドウの幅は、パハグラフの幅 (a + b + c) よりも小さくなります。現在、スクロールは、いずれかのコンポーネント (a、b、または c) の幅がウィンドウの幅よりも大きく、コンポーネントを超えると新しい行に引き継がれる場合にのみ表示されます。各段落の内容をスクロールで同じ行に表示したい。段落の内容が 1 行のように扱われるように、各段落を文字列として扱うにはどうすればよいですか?

4

3 に答える 3

13

CSS を使用すると、次のことができます。

p {
    white-space: nowrap;
    overflow: auto
}

これにより、スペースが改行されなくなり、段落がすべて 1 行になります。

于 2013-04-03T09:07:07.073 に答える
1

white-space:nowrapとoverflow:autocss のプロパティを設定できます。class単一行のテキストが必要な段落タグに を割り当てることができます。

CSS

.className {
    white-space: nowrap;
    overflow: auto;
}

HTML

<div style="overflow: auto"> 
    <p class="className"> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccccccccc
    </p> 
    <p class="className"> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccccccccc
    </p> 
</div>
于 2013-04-03T09:07:18.493 に答える
1

以下のようにスタイルを追加するか

p{
    overflow:auto;
    white-space: nowrap;
}

または以下のようにjQueryを使用します

$('p').css('overflow','auto');
$('p').css('white-space','nowrap');

ここにライブのフィドルの例がありますhttp://jsfiddle.net/mayooresan/qmCwL/

于 2013-04-03T09:10:28.393 に答える