Horizontal touch scroll on mobile with text

Question

I found a solution online that handles horizontal scrolling on mobile devices just fine.

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

The problem that I am having is that within the li tag I have some conditional php echoing out a title. Because of the nowrap the title breaks through the li width. If I remove the nowrap the title is contained within the width limits but the scroll doesn't work. I have used php and js to create line breaks in the text but the scroll still fails.

Looking for help on this one.

Answer 1

I'm not sure to understand what you would expect to do.

Why don't you wrap your title in another tag like this:

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