10文字以上の単語にはどのような機能を設定できますか？

Question

私は、ランダムな言葉がロットによって配布されるdivを持っています。

<script src="jquery.fittext.js"></script> 
    <script type="text/javascript"> 
     $("#my_random_word").fitText(0.6); 
    </script> 

問題は、私の言葉は、長い10文字以下であるときに、画面のために広すぎて、代わりにリサイズの、それだけで、画面の幅をオーバーフローしていることである。これらの単語を表示するには、私はこのスクリプトを使用しています。 CSS：

#parent_of_my_random_word { 
    display: table; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    text-align: center; 
} 

#my_random_word { 
    color: red; 
    height: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    user-select: none; 
    } 

10文字より長いか、私は他に何を行うことができます単語の別の関数を指定する方法はありますか？ありがとう。

Answer 1

あなたはオフの単語をカットし、オーバーフローを防ぐためにtext-overflow: ellipsis;のようなものを使用することができます。

それとも、JSでそれを扱うことができます。

var myWord = $("#my_random_word").text(); 

if (myWord.length >= 10) { 
    // ... handle it 
} else { 
    myWord.fitText(0.6); 
} 

あなたは正規表現を使用することができ、複数の単語を確認するには。以下のような単純なパターンがあります。word-space-word

var pattern = /\w\s+\w/; 

'word'.match(pattern); // null 
'multiple words'.match(pattern); // match found 

Answer 2

css word-break: break-all;を使用すると、単語を壊すことができます。

.content { 
 
    word-break: break-all; 
 
    background: rgba(0, 0, 0, .1); 
 
    width: 100px; 
 
}

<div class="content">veeeerrrrryyyyylonnnng worrrdd</div>