水平滚动html框

我需要在一个页面上显示一个日志，但日志有很长的行（它是一个apache access_log），它既丑陋又不可读。水平滚动html框

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

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

编辑：这里是我的代码

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

$日志包含<br/>新线

来源

2012-08-31 maazza

<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-31 08:48:21

宏伟，谢谢它的作品 – maazza

您需要使用overflow-x为输出

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

你可以得到更好的来自这个链接的信息，这样你就可以玩这个东西

来源

2012-08-31 08:24:17 supersaiyan

我试图溢出 - X，但did'nt工作和您提供的网站有错误（至少在Firefox） – maazza

@maazza给我你的网站 –

着的链接，它是一个内部管理面板 – maazza

嗨，现在习惯了这种

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

来源

2012-08-31 08:26:23

@maazza检查我的代码并应用此代码http://tinkerbin.com/5u5J1jEW –

不起作用，出现scollbar但什么都不做编辑：垂直滚动作品不水平 – maazza

要防止的换行使用：
CSS

p { 
    white-space: nowrap; 
}

然后你就可以用overflow属性来控制滚动。

来源

2012-08-31 08:29:15 albertedevigo

水平滚动html框

回答

相关问题