Горизонтальная прокрутка на мобильном телефоне с текстом

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>