From 1c795ed4817963356f8e552cdc18baec461966ee Mon Sep 17 00:00:00 2001 From: DBlatcher Date: Wed, 3 Jun 2026 14:39:29 +0100 Subject: [PATCH 1/3] overflowWrap: 'anywhere' for CardHeadlines --- dotcom-rendering/src/components/CardHeadline.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/dotcom-rendering/src/components/CardHeadline.tsx b/dotcom-rendering/src/components/CardHeadline.tsx index ec12871d59b..d5915f6f25e 100644 --- a/dotcom-rendering/src/components/CardHeadline.tsx +++ b/dotcom-rendering/src/components/CardHeadline.tsx @@ -247,6 +247,9 @@ export const CardHeadline = ({ isSublink ? 'card-sublink-headline' : 'card-headline' }`} css={[ + { + overflowWrap: 'anywhere', + }, isSublink ? css` ${textSans14} From 2bdb5ff25201766242df6990a05b8aa523e81f97 Mon Sep 17 00:00:00 2001 From: DBlatcher Date: Wed, 3 Jun 2026 15:32:40 +0100 Subject: [PATCH 2/3] limit word breaking to carousel cards --- dotcom-rendering/src/components/Card/Card.tsx | 6 ++++++ dotcom-rendering/src/components/CardHeadline.tsx | 6 +++++- dotcom-rendering/src/components/Carousel.island.tsx | 1 + 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx index 9b60d9ac51a..2235efd9ee6 100644 --- a/dotcom-rendering/src/components/Card/Card.tsx +++ b/dotcom-rendering/src/components/Card/Card.tsx @@ -164,6 +164,7 @@ export type Props = { headlinePosition?: 'inner' | 'outer'; starRatingSize?: RatingSizeType; contentSpacing?: 'small' | 'large'; + allowHeadlineToBreakWords?: boolean; }; const waveformWrapper = ( @@ -410,6 +411,7 @@ export const Card = ({ starRatingSize = 'small', articleMedia, contentSpacing, + allowHeadlineToBreakWords, }: Props) => { const ab = useAB(); const isInLoopClickTestControl = @@ -853,6 +855,7 @@ export const Card = ({ byline={byline} showByline={showByline} isExternalLink={isExternalLink} + allowHeadlineToBreakWords={allowHeadlineToBreakWords} /> {!isUndefined(starRating) && ( @@ -1152,6 +1155,9 @@ export const Card = ({ ? media.podcastImage : undefined } + allowHeadlineToBreakWords={ + allowHeadlineToBreakWords + } /> {!isUndefined(starRating) && ( diff --git a/dotcom-rendering/src/components/CardHeadline.tsx b/dotcom-rendering/src/components/CardHeadline.tsx index d5915f6f25e..0bf6aae18e5 100644 --- a/dotcom-rendering/src/components/CardHeadline.tsx +++ b/dotcom-rendering/src/components/CardHeadline.tsx @@ -58,6 +58,7 @@ type Props = { kickerColour?: string; quoteColour?: string; kickerImage?: PodcastSeriesImage; + allowHeadlineToBreakWords?: boolean; }; const sublinkStyles = css` @@ -234,6 +235,7 @@ export const CardHeadline = ({ kickerColour = palette('--card-kicker-text'), quoteColour = palette('--card-quote-icon'), kickerImage, + allowHeadlineToBreakWords, }: Props) => { // The link is only applied directly to the headline if it is a sublink const isSublink = !!linkTo; @@ -248,7 +250,9 @@ export const CardHeadline = ({ }`} css={[ { - overflowWrap: 'anywhere', + overflowWrap: allowHeadlineToBreakWords + ? 'anywhere' + : undefined, }, isSublink ? css` diff --git a/dotcom-rendering/src/components/Carousel.island.tsx b/dotcom-rendering/src/components/Carousel.island.tsx index 74f1e8e4696..9efa8606b65 100644 --- a/dotcom-rendering/src/components/Carousel.island.tsx +++ b/dotcom-rendering/src/components/Carousel.island.tsx @@ -534,6 +534,7 @@ const CarouselCard = ({ showTopBarMobile={!isOnwardContent} aspectRatio="5:4" contentSpacing="small" + allowHeadlineToBreakWords={true} /> ); From 37e06868201c25b2057b5afaf931d517ae5eefe1 Mon Sep 17 00:00:00 2001 From: DBlatcher Date: Wed, 3 Jun 2026 17:39:37 +0100 Subject: [PATCH 3/3] use word-wrap: break-word if overflow-wrap: anywhere is not supported --- .../src/components/CardHeadline.tsx | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/dotcom-rendering/src/components/CardHeadline.tsx b/dotcom-rendering/src/components/CardHeadline.tsx index 0bf6aae18e5..99b26b64858 100644 --- a/dotcom-rendering/src/components/CardHeadline.tsx +++ b/dotcom-rendering/src/components/CardHeadline.tsx @@ -219,6 +219,15 @@ const defaultFontSizes: ResponsiveFontSize = { mobile: 'xxsmall', }; +const allowWordBreakStyles = css` + @supports (overflow-wrap: anywhere) { + overflow-wrap: anywhere; + } + @supports not (overflow-wrap: anywhere) { + word-wrap: break-word; + } +`; + export const CardHeadline = ({ headlineText, format, @@ -235,7 +244,7 @@ export const CardHeadline = ({ kickerColour = palette('--card-kicker-text'), quoteColour = palette('--card-quote-icon'), kickerImage, - allowHeadlineToBreakWords, + allowHeadlineToBreakWords = false, }: Props) => { // The link is only applied directly to the headline if it is a sublink const isSublink = !!linkTo; @@ -249,11 +258,9 @@ export const CardHeadline = ({ isSublink ? 'card-sublink-headline' : 'card-headline' }`} css={[ - { - overflowWrap: allowHeadlineToBreakWords - ? 'anywhere' - : undefined, - }, + allowHeadlineToBreakWords + ? allowWordBreakStyles + : undefined, isSublink ? css` ${textSans14}