Googleの「budoux」で文字列に適切な改行を挿入します。

adjustLineBreaks.js

import { loadDefaultJapaneseParser } from 'budoux'

const parser = loadDefaultJapaneseParser()

/**
 * 文字列を解析して、適切に改行されるように`wbr`タグを挿入します。
 * IEは`wbr`タグに対応していません。
 * @see https://caniuse.com/wbr-element
 * @see https://github.com/google/budoux/tree/main/javascript
 * @param {HTMLElement} element 最適化する要素
 * @return {void}
 * @example
 * const items = document.getElementsByClassName('js-budou')
 * Array.from(items).forEach(item => adjustLineBreaks(item))
 */
const adjustLineBreaks = element => {
  const target = element

  parser.applyElement(target)
}

export { adjustLineBreaks }

jsBudou.js

import { adjustLineBreaks } from '../../utils/adjustLineBreaks'

/**
 * 文字列を解析して、適切に改行されるように要素を挿入します。
 * 指定した要素の子孫要素すべてに適用されるので注意してください。
 * @example
 * <span class="js-budou">Googleの使命は、世界中の情報を<strong>整理</strong>し、<em>世界中の人がアクセス</em>できて使えるようにすることです。</span>
 *
 * <span class="js-budou" style="word-break: keep-all; overflow-wrap: break-word;">Googleの<wbr>使命は、<wbr>世界中の<wbr>情報を<wbr><strong>整理</strong>し、<wbr><em>世界中の<wbr>人が<wbr>アクセス</em>できて<wbr>使えるように<wbr>する<wbr>ことです。</span>
 */
export default function jsBudou() {
  const items = document.getElementsByClassName('js-budou')

  Array.from(items).forEach(item => adjustLineBreaks(item))
}