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

Answer 2

您可以尝试使用 cssword-break: break-all;来破解单词。

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

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