class.exe

BudouX¹をつかって見出しに<wbr>を挿入してみました。

見出しを分解するコンポーネントを用意しました。

import Link from 'next/link'

import {loadDefaultJapaneseParser} from 'budoux'

const parser = loadDefaultJapaneseParser()

function Breakdown(title: string) {
    return parser.parse(title).map( text => {
                return <>{text}<wbr/></>
            })
}

export function Heading({props}: {props: any}) {
    return (
        <h2>{Breakdown(props.data.title)}</h2>
    )
}

Footnotes

1. https://github.com/google/budoux ↩