如何在CSS中换行或拆分已经包含多个连字符的单词？

.example {
  word-break: break-all;
}

.example {
  overflow-wrap: break-word;
}

<p>This-is-a-long-word<wbr>that-might-need-to-be-broken.</p>

function breakLongWords(element) {
  const words = element.textContent.split(' ');
  const maxLen = 10; // 设置最大单词长度
  const newWords = words.map(word => {
    if (word.length > maxLen) {
      return word.match(new RegExp('.{1,' + maxLen + '}', 'g')).join('\n');
    }
    return word;
  });
  element.textContent = newWords.join(' ');
}

const element = document.querySelector('.example');
breakLongWords(element);

<p class="example">This-is-a-very-long-word-that-needs-to-be-broken-into-smaller-parts.</p>

.example {
  word-break: break-all;
}

function breakLongWords(element) {
  const words = element.textContent.split(' ');
  const maxLen = 10;
  const newWords = words.map(word => {
    if (word.length > maxLen) {
      return word.match(new RegExp('.{1,' + maxLen + '}', 'g')).join('\n');
    }
    return word;
  });
  element.textContent = newWords.join(' ');
}

const element = document.querySelector('.example');
breakLongWords(element);