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

Question

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

例如：我想从 Floccinaucinihilipilification 中获得 Floccinaucinihilipilification。

当前的浏览器已经能够用连字符将它们分开，语法正确。

原因：我想像字典中那样显示一个术语。因此，最简单的方法是了解浏览器如何破坏它，但在一行中显示它。

换句话说：如果有足够的 space 至少显示最窄的音节，是否有任何方法可以访问将显示给用户代理的单词？

Answer 1

如果您想要自动断字，您将不得不使用第三方 js 库，例如 Hyphenator。

如果您想手动放置标记，例如 ，您可以在 html 范围内手动完成。

Answer 2

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

这是一种适用于 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>

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

Get a word broken into syllables and separated by hyphens, without displaying it as

html

css

css-hyphens