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

user_7196084 0
Viewed 49

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.

fittextjs css html
2 Answers

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
user_87082010

You can try to use css word-break: break-all; to break the word.

.content {
  word-break: break-all;
  background: rgba(0, 0, 0, .1);
  width: 100px;
}
<div class="content">veeeerrrrryyyyylonnnng worrrdd</div>

user_65393170
Related