2017-11-02 6 views
0

hyphenator.jsを使って、コンテナよりも大きい単語をハイフネーションするだけで、それ以外の言葉はそのまま残す方法があるのだろうかと思います。 (彼らは、コンテナを収めることができます。)他のすべての言葉は、単に次の行に壊す必要があるhypernator.js:オーバーフローした単語だけをハイフネーションする方法はありますか?

Hyphenatorを使用して

Hyphenator.config({ 
 
    defaultlanguage: 'en' 
 
}); 
 
Hyphenator.run();
body { 
 
    font-family: sans-serif; 
 
    font-size: 25px; 
 
    color: #333; 
 
    margin: 50px; 
 
    display: flex; 
 
    width: 800px; 
 
} 
 

 
div { 
 
    padding: 20px; 
 
    margin: 20px; 
 
    width: 270px; 
 
    background-color: #f0f0f0; 
 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Hyphenator/5.3.0/Hyphenator.min.js"></script> 
 
<div class="hyphenate"> 
 
    <p><strong>with hyphenator</strong>:</p> 
 
    <p>How can I force hyphens on words that are very long, like this one: "Verylongwordthatshouldbehypenated"?</p> 
 
    <p>But, as long as words will fit the container I don't want Hypenation. So there should be no hyphens here: "Iamalongword Cellardoor Anotherlongword Thisisaprettylongword"</p> 
 
</div> 
 

 
<div> 
 
    <p><strong>What I would like</strong>:</p> 
 
    <p>How can I force hyphens on words that are very long, like this one: "Verylongwordthat&shy;shouldbehypenated"?</p> 
 
    <p>But, as long as words will fit the container I don't want Hypenation. So there should be no hyphens here: "Iamalongword Cellardoor Anotherlongword Thisisaprettylongword"</p> 
 
</div>

私はこのようなすべての単語破ることができます。問題があるHyphenator.run();

をそれはハイフネーションされてはならない単語をハイフネーションすることになります。ここで

は、問題を説明するためのペンです: https://codepen.io/pwkip/pen/NwxKrr

これを回避任意の方法? the documentationでチラッから

答えて

0

とあなたのcodepenをいじる、あなたはどちらかということleftminまたはminwordlength設定オプションを増やすか、useCSS3hyphenationを有効にすることでは達成することができます。

+0

Good find。それぞれのコンテナに対して '' leftmin ':$(container).width() 'を設定できれば、問題は解決します。しかし、これを行う効率的な方法があるかどうかはわかりません。編集:ああ、いいえ、左目は画素ではなく文字の数として表現されるので、うまくいきません。 –

関連する問題