带有文本的移动设备上的水平触摸滚动

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>