Question

我需要在页面上显示日志，但是日志有很长的行（它是一个apache access_log），它既丑陋又难以理解。

如何使用水平滚动条显示内容？

我正在使用bootstrap并尝试使用overflow : auto/scroll并修复高度/宽度但没有成功。

编辑：这是我的代码

<div class="well" style="overflow-x: scroll;width:200px;" >
<?php
    echo $log;
?>
</div>

$ log包含新行<{1}}

Answer 1

<div style="overflow-x: scroll;white-space:nowrap;width:200px;
height:200px;border:1px solid red" >
    A Very long line gjkdddddssssss sssssssssssssssssssss ssssssssssss
ssssssssssss ssss
ssssssss
ssssssssssssss sssssssssssssssssssssssss ss
sssssssssssssssssss ssssssssssssssssssssssss
    </div>

White-Space是您需要设置的属性。

演示：http://jsfiddle.net/amandeepj/ZQuKG/

Answer 2

您需要使用overflow-x作为输出

http://www.css3.info/overflow-xoverflow-y/

你可以从这个链接获得更好的信息，这样你就可以了解这个东西

Answer 3

你现在习惯了这个

<强> HTML

<div class="ok">heli msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample helo i msample </div>

<强>的CSS

    .ok{
    background:red;
      width:200px;
      height:200px;
      overflow:scroll;
word-break: break-all;
    }

的 Demo 的

Answer 4

要防止换行使用：
CSS

p {
    white-space: nowrap;
}

然后您可以使用overflow属性控制滚动。

可水平滚动的html框

4 个答案: