Javascript 与DIV的水平滚动条斗争

我的页面上有一个DIV元素，它的全部内容由一个异步AJAX调用生成。内容是从P元素（段落）构建的，其中也包含A元素（href链接），而没有其他内容。事实上，我的小网页除了上面提到的DIV之外没有其他内容，id参数是“log”

我的DIV和p元素的CSS代码是：

<style>

p { line-height:20%;
font-size:9px;
font-family:monospace
} 

a {text-decoration:none} 

a[title]:hover:after {font-size:9px;font-family:monospace}

div#log {
width: 1000px;
overflow-x: scroll;
}

</style>

p{线高：20%；
字体大小：9px；
字体系列：monospace
} 
a{文本装饰：无}
a[标题]：悬停：在{font size:9px；font-family:monospace}之后
div#log{
宽度：1000px；
溢出-x：滚动；
}

我在页面上根本没有其他内联或其他样式元素

AJAX返回的动态内容如下所示：

<p>2016-05-17 11:40:23 | <a href="http://example.com/?ip_to_lookup=192.143.125.212">192.143.125.212&nbsp;&nbsp;&nbsp;</a> | Palma de Mallorca - Balearic Islands: Spa... | <a href="http://example.com/?place_to_lookup=Palma+de+Mallorca+-+Balearic+Islands" target=_blank>Palma+de+Mallorca+-+Balearic+Islands</a> | <a href=# title="Palma+de+Mallorca+-+Balearic+Islands | Mozilla/5.0 (Linux; Android 6.0.1; Nexus 6 Build) | OmniAccess Broadband | 0.34776657 sec">Misc data</a></p>

2016-05-17 11:40:23 | | | | | | | |马洛卡棕榈岛-巴利阿里群岛：水疗中心…| |

水平滚动条出现，但看起来像已禁用，没有滑块。当内容宽度大于1000像素，或者我将宽度设置得更小时，比如说500像素，滑块仍然不会出现，而不是段落内容从右侧扭曲到左侧，溢出的字母覆盖下一行/段落的开头

---

如何使滚动条正常工作？

根据我对您问题的理解。你需要这样的东西吗

p{
字体大小：16px；
溢出-x：滚动；
宽度：100px
}

---

2016-05-17 11:40:23 | | | | | | | |马洛卡棕榈岛-巴利阿里群岛：水疗中心…| |
 

既然你说你的页面只包含这个

#log

div，我将给出一个涉及到稍微改变事情的答案，并给出如下解释：

p{
/*增加*/
空白：nowrap；
/**/
线高：20%；
字体大小：9px；
字体系列：monospace
}
a{
文本装饰：无
}
a[标题]：悬停：之后{
字体大小：9px；
字体系列：monospace
}
div#log{
/*宽度：1000px*/
溢出-x：滚动；
}

2016-05-17 11:40:23马洛卡棕榈岛-巴利阿里群岛：水疗中心

2016-05-17 11:40:23马洛卡棕榈岛-巴利阿里群岛：水疗中心

2016-05-17 11:40:23马洛卡棕榈岛-巴利阿里群岛：水疗中心

发生这种情况是因为

行高和
#log
div的宽度。下面是您的问题：


问题是将单词包装到新行上，
p
元素将调整包含div的宽度，因为它超过了长度，所以将包装到新行上-行高是它重叠的原因。只需将
空白：nowrap
添加到
p
元素：

还请添加JS和任何fiddle来重现问题。这并不容易，因为如何模拟AJAX调用和动态内容？您可以在
标记中添加任何虚拟数据以进行演示。@Konstantin我很高兴，很高兴它有所帮助。