javascript - 是否可以在包装文本之前设置组件可以水平滚动多远的最大值？

Question

我希望用户能够在 React 组件中的文本上水平滚动，但我仍然希望有一些比组件的边界矩形更大的有界宽度。这样一来，我就可以有常规的段落，而不必担心任何换行。我知道我需要将overflow-x属性设置为自动，但我不知道该怎么做。谢谢您的帮助！

标签： javascripthtmlcssreactjsscroll

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>