Some code blocks will not automatically line break

Author: 1226085293Created Jun 30, 2025Updated Mar 30, 2026
Labelsbug

Describe the bug Content surrounded by ` in mdx will not be automatically wrapped on mobile devices

To Reproduce

  1. Preview mdx content using a mobile device or a browser that reduces the width
mdx
---
title: 图片内存占用记录
date: 2024-04-28 00:00:00
---

占用内存获取:`cc.gfx.deviceManager.gfxDevice.memoryStatus.textureSize0000000000000000000000000000000000`

ETC1 内存占用计算公式:`width * height / 4 / 1024 / 1024`

Expected behavior Code block cc.gfx... that exceeds the display area is wrapped normally

Screenshots

Image

System Info (if dev / build issue):

  • OS: windows
  • Node version (please ensure you are using 18+): v22.16.0
  • Npm version: 10.9.2

Browser Info (if display / formatting issue):

  • Device [e.g. Desktop, iPhone6] Desktop, iPhone16Pro
  • Browser [e.g. chrome, safari] chrome、safari
  • Version [e.g. 22] 137.0.7151.120、ios18.5

Additional context I solved it by adding the following global css

css
code {
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

Source: timlrx/tailwind-nextjs-starter-blog