html - 有什么方法可以为超过(例如)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