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

【问题标题】：Get a word broken into syllables and separated by hyphens, without displaying it as将一个单词分成音节并用连字符分隔，而不是将其显示为
【发布时间】：2017-04-01 01:00:41
【问题描述】：

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

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

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

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

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

【问题讨论】：

Chrome 仅在 Mac 和 Android 上支持此功能。 caniuse.com/#feat=css-hyphens
stackoverflow.com/questions/3738490/finding-line-wraps

标签： html css css-hyphens

【解决方案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;
}

&lt;div id=testbed lang=en&gt;Floccinaucinihilipilification&lt;/div&gt;

【讨论】：

哇！效果很好。感谢这段代码，暂时还不是很明白，借机学习一下。

【解决方案2】：

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

如果您想手动放置标记，例如 &shy;，您可以在 html 中手动放置。

【讨论】：