Question

我的页面上有一个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>

我根本没有其他内联或其他样式元素。

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>

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

怎么做才能使滚动条正常工作？

Answer 1

既然你说你的网页除了这个#log div之外什么都没有，我会给出一个稍微改变一下的答案，并附上解释：

p {
  /* Added */
  white-space: nowrap;
  /**/
  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;
}

<div id="log">
  <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>
  <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>
  <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>
</div>

如果您将width保留在#log上，则仅当p标记宽于1000px时才会显示滚动条。所以，我摆脱了它。然后，我将white-space: nowrap添加到p，因为您似乎希望每行都在一行。

Answer 2

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

p {
font-size:16px;
overflow-x: scroll;
width:100px
}

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

如果我误解了你，请告诉我。

Answer 3

这是因为nativeMessaging div的line-height属性和宽度而发生的。这是您复制的问题：

JSFiddle

问题是将单词包装到新行上，#log元素将调整包含div的宽度，并且因为它超出了它将包裹到新行的长度 - 行高是它重叠的原因。只需将p添加到white-space: nowrap元素：

JSFiddle

挣扎着DIV的水平滚动条

3 个答案: