Question

假设我在段落中有几条很长的行：

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

并且窗口宽度小于pahagraph的宽度（a的是+ b的+ c的）。目前只有当任何组件（a，b或c）的宽度超过窗口宽度并且组件被传送到新行时，才会出现滚动。我希望每个段落的内容与滚动显示在同一行。如何将每个paraghaph视为一个字符串，因此段落的内容被视为一行？

Answer 1

使用CSS，您可以：

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

这使得空格不会中断，因此段落将全部在一行上。

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>

Answer 3

添加样式如下

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

或使用如下的jQuery

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

这是一个实时小提琴示例http://jsfiddle.net/mayooresan/qmCwL/

在div溢出而不是新行的paraghapghs中创建文本

3 个答案: