css - 代码片段超出边界。如何使其响应移动视图？

问题描述

我正在使用 nextjs 显示来自 ghost 的内容，但在处理代码块/片段时我注意到了这个偏移量。我该如何解决这个问题，以便它能够响应移动设备？

这就是没有代码块的样子：

我已经申请white-space: pre-wrap;了，它适用于小代码标签，但不适用于大代码标签。

因为我正在使用 ghost content api 并拉入 html，所以很难进行更改。

我从 ghost 导入 html 并像这样渲染它：

<Text
   lineHeight="10"
   fontSize="2xl"
   dangerouslySetInnerHTML={{ __html: post.html }}
 ></Text>

我把它包裹在一个容器中，我正在修改标签，如下所示：

<>
      <style jsx global>{`
        pre {
          display: block;
          font-family: monospace;
          white-space: pre;
          margin: 1em 0px;
        }
        code {
          color: #fff;
          text-shadow: 0 1px 1px #000;
          font-family: Menlo, Monaco, "Courier New", monospace;
          direction: ltr;
          text-align: left;
          word-spacing: normal;
          word-wrap: normal;
          line-height: 1.4;
          background: none;
          border: 0;
          tab-size: 4;
          hyphens: none;
          overflow-wrap: break-word;
          white-space: pre-wrap;
        }
      `}</style>
      <Flex
        direction="column"
        alignItems="center"
        justifyContent="flex-start"
        bg={bgColor[colorMode]}
        color={color[colorMode]}
      >
        <DarkModeSwitch />
        <Flex alignItems="center" justifyContent="center" pt="10">
          {children}
        </Flex>
      </Flex>
    </>

我已经复制了 Matt Carlotta 示例中的所有内容，但我仍然得到这个结果：

然而，当我检查他的例子时，我得到了这个：

我可以向右滚动以查看完整代码。

我猜语法荧光笔正在帮助解决这个问题。但是，因为我正在导入 ghost 生成的 html，所以我无法应用它。或者，如果我是，我不确定如何。

解决方案是应用 Matt Carlotta 推荐的更改并调整代码标签的字体大小。

标签： cssreactjs

你很近。white-space: pre-wrap;与overflow-wrap: break-word;一起使用

工作示例（在这种情况下wrapLongLines= white-space: pre-wrap;）：

我不确定您是否只是将其放入pre/code块中，但您将获得更多的灵活性和使用语法荧光笔的选项。甚至 reactjs 文档也遇到了类似的问题。

然而，处理小屏幕尺寸总是会导致代码混乱，除非您overflow-y: auto;使用width//属性进行设置max-width。min-width

css - 代码片段超出边界。如何使其响应移动视图？

问题描述

解决方案

推荐阅读