html - 将一个单词分成音节并用连字符分隔，而不将其显示为

Question

我想得到一个字符串，一个单词分成一个或多个音节，如果有多个音节，中间也有连字符。

例如：我想从 Floccinaucinihilipilification 中取出 Floccinaucinihilipil-ification。

当前的浏览器已经能够通过连字符来打破它们，语法正确。

原因：我想显示一个术语，就像它在字典中一样。因此，最简单的事情是访问浏览器如何破坏它，但在一行中显示它。

换句话说：如果有足够的空间至少显示最窄的音节，是否有任何方法可以访问一个单词，因为它会显示给用户代理？

Answer 1

如果有点乏味，可以确定自动换行在文档中的位置。但是您还依赖于具有连字符字典的浏览器，这可能取决于平台，也可能取决于用户的语言。

这是一种适用于 Firefox 的方法。我无法让 Chrome 或 WebKit 在每个可能的位置可靠地连字，它只是放弃了低于一定宽度的连字。

testbed.innerHTML = testbed.innerHTML.replace(/./g, '<span>$&</span>');
outer = testbed.getBoundingClientRect();
match = [...testbed.querySelectorAll('span:not(:first-child)')].filter(e => e.getBoundingClientRect().x == outer.x);
match.forEach(e => e.classList.toggle('match', true));
output = [...testbed.children].map(e => (e.classList.contains('match') ? '-' : '') + e.textContent).join('');
console.log(output);

div#testbed {
  width: 0;
  hyphens: auto;
}
span.match {
  background: magenta;
}

<div id=testbed lang=en>Floccinaucinihilipilification</div>

Answer 2

如果您想要自动断字，则必须使用第三方js库，例如Hyphenator。

如果您想手动放置标记，例如­, 您可以在html手动中进行。