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

您可以尝试使用css word-break: break-all;来破解这个词。

＆＃13;

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

＆＃13;

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

＆＃13;

有没有办法为一个长于（例如）10个字母的单词设置一个函数？

2 个答案: