Text Overflows and Doesn’t Wrap Within Set Container Limits

[MeiyuTech]

Hi everyone,
I’m encountering an issue where text content does not automatically wrap, causing it to overflow beyond the container’s boundaries.

I am new here, just use the admin panel create a page, like this:

What I observed:
• As seen in the screenshot below, long text strings overflow the container.
• The text does not wrap to the next line and instead continues horizontally.
• This happens both in the hero section and lower content blocks.

What I expected:
• The text should wrap within its container and respect the set width constraints.

What did I try:

I modified src/blocks/Content/Component.tsx and added className="break-words" to the content block. After this change, the text wraps properly within the container. But I guess it was not designed that way, right??

import { cn } from 'src/utilities/cn'
import React from 'react'
import RichText from '@/components/RichText'

import type { ContentBlock as ContentBlockProps } from '@/payload-types'

import { CMSLink } from '../../components/Link'

export const ContentBlock: React.FC<ContentBlockProps> = (props) => {
  const { columns } = props

  const colsSpanClasses = {
    full: '12',
    half: '6',
    oneThird: '4',
    twoThirds: '8',
  }

  return (
    <div className="container my-16">
      <div className="grid grid-cols-4 lg:grid-cols-12 gap-y-8 gap-x-16">
        {columns &&
          columns.length > 0 &&
          columns.map((col, index) => {
            const { enableLink, link, richText, size } = col

            return (
              <div
                className={cn(`col-span-4 lg:col-span-${colsSpanClasses[size!]}`, {
                  'md:col-span-2': size !== 'full',
                })}
                key={index}
              >
-                {richText && <RichText data={richText} enableGutter={false} />}
+                {richText && (
+                  <RichText data={richText} enableGutter={false} className="break-words" />
+                )}

                {enableLink && <CMSLink {...link} />}
              </div>
            )
          })}
      </div>
    </div>
  )
}

Environment:
• Browser: Chrome
• Version: Lastest Payload

[MeiyuTech]

Thank ZeRo2160 so much !!!

I see... there seems some confusion here. :) Payload is only the admin. You seem to have used the webpage template. This is only for Demo purposes or for an starting point to build your own template. Payload itself is nothing more than the admin panel. Everything else is more or less up to the dev who wants to make an page with it. So your issue seems to be non breaking Text. As you dont have any Text tokens in your "blablabla..." Text the Browser does not know when the word ends or begins. So it does not know when to break the Text. As i am sure there is no word this long without an space or hyphen you will not have this problem with real Text. Try an Loren Issum Text for example and you will see everything is fine. This is normal Browser behavior and has nothibg to do with payload. :)

Now it works. Sorry for my stupid questions.