1

我需要在页面上显示日志，但日志的行很长（它是一个 apache access_log），它变得既丑陋又不可读。

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

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

编辑：这是我的代码

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

$log 包含<br/>换行

4

4 回答 4

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/

于 2012-08-31T08:48:21.263 回答
0

您需要overflow-x用于输出

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

您可以从此链接获得更好的信息，以便您可以了解这件事

于 2012-08-31T08:24:17.277 回答
0

嗨，现在习惯了

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;
    }

演示

于 2012-08-31T08:26:23.533 回答
0

为了防止换行使用：
CSS

p {
    white-space: nowrap;
}

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

于 2012-08-31T08:29:15.770 回答