网格内有溢出空白的 HTML 文本答案

【问题标题】：Html text with overflowing whitespace inside grid网格内有溢出空白的 HTML 文本
【发布时间】：2019-07-22 17:38:17
【问题描述】：

我在 React.js 的网格中添加了文本。在 Material UI 的这个 Grid 组件中，我正在渲染不同的组件。有时我需要将视图分成两半，因此 6half/12full 宽度是有条件的。

当将 Paper(elevated div) 组件（见下文）添加到 Grid 中的 left-或 rightPane 时，页面的宽度变得很大，屏幕上有很多空白，因此它可以向两侧滚动。即使它应该遵循指定 6/12 半尺寸的网格。文本 infact 在其网格内正确显示，但在网格项之间添加了大量空白。就像文本会泄漏并给出额外的宽度。

如果我为 text/html 组件设置了一个固定的 with，它不会使巨大的空白变得那么长。这仅在 Safari 中发生，并且仅在此 text/html 组件中发生，与其他 jsx 组件一起工作就像一个魅力。在 Chrome 中，它旁边的组件中还添加了一些挤压填充，但不是那么大。可能发生了什么以及如何在 div 中捕获 html/文本或任何其他建议？

父网格渲染部分：

<div className={cssStyles.container}>
  <Grid container direction="column" >
    {
      leftPane && (
        <Grid item xs={rightPane ? 6 : 12}>
          <Grid container  wrap="nowrap">
            <Grid item>
              <VerticalMenu
              />
            </Grid>
            <Grid item xs>
              {renderLeftPane()}
            </Grid>
          </Grid>
        </Grid>
      )
    }
    {
      rightPane && (
        <Grid item  xs={leftPane ? 6 : 12}>
          <Grid container  wrap="nowrap">
            <Grid item xs>
              {renderRightPane()}
            </Grid>
            <Grid item>
              <VerticalMenu
              />
            </Grid>
          </Grid>
        </Grid>
      )
    }
  </Grid>

在 renderLeftPane() 或 renderRightPane() 中使用时，Childs 渲染部分会弄乱页面

<Paper >
  <div className={someFixedWidhtHereHelpsSome}>
    <h1>Inledning</h1>
    <p>
      Osanno- likt nog överlevde han färden 572 meter upp
      i luften och kunde efter en hård fallskärmslandning
      konstatera att han hade över- bevisat
      alla pessimister som hade förutspått hans undergång.
      Det var emellertid inte bara en allmän våghalsighet
      och raketintresse som motiverade honom.
    </p>
    <p>
      Redan Eratosthenes (276–194 f.Kr.)
      kunde bevisa att jorden var rund och
      dessutom uppskatta dess storlek med förvånansvärd
      precision. Han gjorde det genom att
      jämföra skuggors..
    </p>
    <p>
      Redan Eratosthenes (276–194 f.Kr.)
      kunde bevisa att jorden var rund och
      dessutom uppskatta dess storlek med förvånansvärd
      precision. Han gjorde det genom att
      jämföra skuggors vinklar på olika avlägsna platser,
      ett experiment..
    </p>
  </div>

【问题讨论】：

标签： html css reactjs safari

【解决方案1】：

好的，找到它，将顶部网格容器从列更改为行：<Grid container direction="row">

【讨论】：