diff --git a/.changeset/twelve-carrots-stare.md b/.changeset/twelve-carrots-stare.md new file mode 100644 index 00000000000..ccb181a6623 --- /dev/null +++ b/.changeset/twelve-carrots-stare.md @@ -0,0 +1,5 @@ +--- +"@utrecht/root-css": patch +--- + +Enable hypenation for the Root component. diff --git a/components/root/src/_mixin.scss b/components/root/src/_mixin.scss index c8c0d4588d8..19d01e529ef 100644 --- a/components/root/src/_mixin.scss +++ b/components/root/src/_mixin.scss @@ -21,6 +21,7 @@ * - the root must be a "positioned ancestor", so elements that are positioned * outside the normal document flow (`absolute`, `fixed` and `sticky`) * are positioned relative to the root component. + * - ensure text content fits at 400% zoom by enabling hypenation. */ @include reset-font-smoothing; @@ -28,6 +29,10 @@ block-size: 100%; color: var(--utrecht-root-color); font-family: var(--utrecht-root-font-family); + -webkit-hyphens: auto; + -moz-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; inline-size: 100%; overflow-block: auto; overflow-inline: auto; @@ -36,4 +41,5 @@ -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; + word-break: break-word; }