UTF-8 文本从父框架中弹出

Question

我对前端有点陌生。 最近，我使用基于 Next.js、tailwind 和 React 的模板创建了博客。

当我输入 UTF-8 文本（韩语）时，文本从移动设备上的父框架中弹出。

你能帮我解决这个问题吗？

我的屏幕看起来像：

我的代码如下所示：

(jsx)

      <div className="mt-6 grid gap-6 md:mt-12 md:grid-cols-[auto_3fr_auto] md:gap-0">
        <div>
          <SocialShare url={pageUrl} className="sticky left-10 top-12 z-10" />
        </div>
        <div className="prose prose-invert mx-auto max-w-prose prose-pre:max-w-[90vw]">
          <ContentRenderer source={content} />
        </div>
      </div>

（CSS）

@layer base {
  * {
    @apply box-border;
  }
  h1 {
    @apply text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl;
  }
  h2 {
    @apply text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl;
  }
  h3 {
    @apply text-3xl font-bold tracking-tight lg:text-4xl;
  }
  h4 {
    @apply text-2xl font-bold md:text-3xl;
  }
  h5 {
    @apply text-xl font-bold md:text-2xl;
  }
  h6 {
    @apply text-lg font-bold md:text-xl;
  }
  p {
    @apply text-base md:text-lg;
  }
  small,
  small * {
    @apply text-sm font-medium md:text-base;
  }
  :is(h1, h2, h3, h4, h5, h6) {
    & > em {
      @apply text-gradient-500 not-italic;
    }
    & > span {
      color: var(--tw-prose-counters);
    }
  }
}

@layer utilities {
  .text-gradient-500 {
    @apply bg-gradient-to-br from-alpha to-beta bg-clip-text text-transparent;
  }
  .bg-gradient-omega-900 {
    @apply bg-gradient-to-r from-omega-900 to-omega-800;
  }
  .with-back-plate {
    @apply relative mb-2 -translate-x-2 md:mb-2 md:-translate-x-2;
    &::before {
      @apply absolute right-0 bottom-0 h-full w-full translate-y-2 translate-x-2 bg-white md:translate-y-2 md:translate-x-2;
      content: '';
      z-index: -1;
    }
  }
}

部署地点：

• https://kadensungbincho.com/

Answer 1

将

overflow-wrap: anywhere;

等价类/css 添加到 p 标签应该可以。