将段落文本显示在带有溢出属性的div中，而不是换行显示。

Question

假设我有一个段落中的几行较长的文本：

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

如果窗口宽度小于段落的宽度（a + b + c），那么目前只会出现滚动条，仅当组件 (a，b或c) 的宽度超过窗口的宽度时，这些组件才会换行。我希望每个段落的内容都可以在同一行上滚动显示。如何将每个段落视为字符串，以便段落的内容被视为单行？

- Sergei G

Answer 1

CSS可以实现以下效果：

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

这将使空格不可断开，因此段落将全部放在一行中。

- Piet van Dongen

---

你一定在开玩笑！非常感谢！ :) - Sergei G

Answer 2

你可以设置CSS的white-space:nowrap和overflow:auto属性。对于想要单行文本的段落标签，可以分配一个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>

- Adil

Answer 3

可以按照以下方式添加样式

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

或者使用以下的jQuery。

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

这里是一个实时的jsfiddle示例 http://jsfiddle.net/mayooresan/qmCwL/

- Jay Mayu

---

只是好奇，为什么不用 $('p').css({overflow: 'auto', whiteSpace: 'nowrap'});？ - Mr_Green