Consider rolling back the global word-break: break-word style

[fvsch]

Describe the bug

A recent update (#1064) added a word-break: break-word style to all HTML elements. This leads to unpleasant results such as this in table cells (see the first and last column):

While before this update the result was much more readable:

Reproduction

StackBlitz reproduction with a table:
https://stackblitz.com/edit/vitepress-theme-word-break-issue?file=index.md

Expected behavior

Risky styles such as word-break: break-word should not be applied to all elements.

Handling overflowing content (if any) should be done at the component level, probably with specific solutions for each component.

System Info

System:
    OS: macOS 12.6
    CPU: (8) arm64 Apple M1
    Memory: 117.00 MB / 8.00 GB
    Shell: 3.5.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 16.17.1 - /opt/homebrew/opt/node@16/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.1 - /Volumes/Pieces/.npm/bin/npm
  Browsers:
    Chrome: 105.0.5195.125
    Firefox Nightly: 107.0a1
    Safari: 16.0
  npmPackages:
    vitepress: ^1.0.0-alpha.16 => 1.0.0-alpha.16

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

Ah right. What if we set overflow-wrap: break-word; instead?

[fvsch]

It looks like overflow-wrap: break-word would have a less drastic result, while still fixing the issue for e.g. long continuous strings in content. So that could be a good fix.

Personally, I'd still be in favor of not applying styles to all elements. The * { box-sizing: border-box } technique has been battle-tested for 15 years, but defining other styles on all elements tends to have unintended consequences in my experience.

Maybe a more targeted style for markdown content?

:where(.vp-doc) :is(h1, h2, h3, h4, h5, h6, p, li) {
  overflow-wrap: break-word;
}

or, if applying to table cells make sense (not sure it does for us, but I’d have to check against a bunch of content), maybe target td elements as well:

:where(.vp-doc) :is(h1, h2, h3, h4, h5, h6, p, li, td) {
  overflow-wrap: break-word;
}

[brc-dd]

Actually stuff not inside .vp-doc was overflowing too (like in #1088). We probably can just use that on all h* and p elements, irrespective of vp-doc/vp-home?

[brc-dd]

I've reverted #1064. Haven't added anything new, we will discuss later what might be the best option here.