Gibt es eine Möglichkeit, eine Funktion für ein Wort zu setzen, das länger als (z. B.) 10 Buchstaben ist?

Question

Ich habe ein Div, in dem zufällige Wörter durch Los verteilt werden. Um diese Worte angezeigt verwende ich dieses Skript:

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

Das Problem ist, dass, wenn mein Wort ist länger als 10 Zeichen ist zu breit für den Bildschirm und statt Ändern der Größe, es überläuft gerade die Breite des Bildschirms. 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; 
    } 

Gibt es eine Möglichkeit eine andere Funktion für die Wörter angeben, die länger als 10 Buchstaben oder was kann ich sonst noch tun? Vielen Dank.

Answer 1

Sie so etwas wie text-overflow: ellipsis; verwenden können, das Wort ab und verhindern Überlauf zu schneiden.

Oder man kann es mit JS Griff:

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

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

Um mehrere Wörter überprüfen Sie regex verwenden können. Das Folgende sucht nach einem einfachen Muster von word-space-word

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

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

Answer 2

Sie können versuchen, css word-break: break-all; zu verwenden, um das Wort zu brechen.

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

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