Question

我在网上找到了一个解决移动设备上水平滚动的解决方案。

<div style="max-width: 1024px; margin: auto; ">
   <ul style="white-space: nowrap; overflow-y: hidden; overflow-x: scroll; -webkit-overflow-scrolling: touch; ">
     <li style="display: inline-block; width: 240px;">

我遇到的问题是在li标签内我有一些有条件的php回显标题。由于nowrap，标题突破了li宽度。如果我删除了nowrap，标题包含在宽度限制内，但滚动不起作用。我使用php和js在文本中创建换行符，但滚动仍然失败。

寻求这方面的帮助。

Answer 1

我不确定你会怎么做。

为什么不将标题包装在另一个标签中：

<div style="max-width: 1024px; margin: auto; ">
  <ul style="white-space: nowrap; overflow-y: hidden; overflow-x: scroll; -webkit-overflow-scrolling: touch; ">
    <li style="display: inline-block; width: 240px;">
      <span style="display: block; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
        Your title goes here
      </span>
    </li>
  </ul>
</div>

移动设备上的水平触摸滚动

1 个答案: