wymyszony wymyszony - 1 year ago 119
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">
$("#my_random_word").fitText(0.6);
</script>


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.
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;
}


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 {
   myWord.fitText(0.6);
}

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