単語を音節に分割し、ハイフンで区切って表示しないでください。

Question

単語が1つ以上の音節に分割されていて、複数の場合はハイフンで区切ります。

例：Floccinaucinihilipil-ificationをFloccinaucinihilipilificationから取得したいと考えています。

現在のブラウザではハイフンで区切られていますが、文法上の問題はありません。

理由：辞書に表示されていたような用語を表示したいと思います。そこで最も簡単なのは、ブラウザがどのように壊れてしまうかにアクセスすることですが、1行に表示することです。

言い換えれば、少なくとも狭い音節を表示するのに十分なスペースがあれば、ユーザーエージェントに表示されるように単語にアクセスする方法はありますか？

Answer 1

ちょっと面倒なことがあれば、単語の折り返しがどこにあるのかを判断することは可能です。しかし、あなたはまた、プラットフォームとおそらくユーザの言語に依存することができるハイフネーション辞書を持つブラウザに依存している。

これはFirefoxで動作する1つの方法です。私は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

自動ハイフネーションを使用する場合は、Hyphenatorのようなサードパーティのjsライブラリを使用する必要があります。

­などのマークを手作業でhtml内に配置することができます。