wymyszony wymyszony - 3 years ago 238
CSS Question

Is there any way to set a function for a word which is longer than (e.g.) 10 letters?

I have a div to which random words are distributed by lot. To display these words I use this script:

<script src="jquery.fittext.js"></script>
<script type="text/javascript">

The problem is that when my word is longer than 10 letters is too wide for the screen and instead of resizing, it just overflows the screen's width.

#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;

Is there any way to specify another function for the words longer than 10 letters or what else can I do? Thanks.

Answer Source

You can use something like text-overflow: ellipsis; to cut the word off and prevent overflow.

Or you can handle it with JS:

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

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

To check for multiple words you can use regex. The following looks for a simple pattern of word-space-word

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

'word'.match(pattern); // null
'multiple words'.match(pattern); // match found
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download