javascript - 使 div 中 paraghapghs 中的文本溢出而不是换行

Question

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

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

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

Answer 1

使用 CSS，您可以：

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

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

Answer 2

你可以设置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>

Answer 3

添加样式如下

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

或使用 jQuery 如下

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

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