Можно ли установить максимальное расстояние прокрутки компонента по горизонтали до переноса текста?

Question

Я бы хотел, чтобы пользователи могли прокручивать текст по горизонтали в компоненте React, но мне бы хотелось иметь ограниченную ширину, превышающую ограничивающий прямоугольник компонента. Таким образом, я мог бы просто иметь регулярные абзацы, не беспокоясь о разрыве строки на лету. Я знаю, что мне нужно установить для свойства overflow-x значение auto, но я не уверен, что делать после этого. Спасибо за помощь!

Answer 1

Вот мое решение.

body {
  width: 100%;
  max-width: 800px;
  margin: 30px auto;
}

.wrapper {
  border: 1px solid #afafaf;
  width: 100%;
  overflow-x: scroll;
}

.inner {
  padding: 10px;
  width: 130%;
}

<div class="wrapper">
  <div class="inner">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex labore, provident dolorum repellendus earum aliquid voluptatem nobis odit. Deserunt corrupti repellendus voluptate harum quaerat adipisci aut sequi consequuntur voluptas cum?</div>
</div>