javascript - 是否可以设置组件在文本换行之前可以水平滚动的最大距离？

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;
  box-sizing: border-box;
}

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