CSS/JS - 如果单词对于容器来说太长，则覆盖字体大小答案

【问题标题】：CSS/JS - Overriding font-size if the word is too long for the containerCSS/JS - 如果单词对于容器来说太长，则覆盖字体大小
【发布时间】：2020-02-05 07:51:33
【问题描述】：

我有一系列容器，每个容器都包含一个单词，偶尔包含两个单词。

CSS

.container-title {
  font-size: 5.625vw;
}

HTML

<div class="container">
  <div class="container-title">Orange</div>
</div>

<div class="container">
  <div class="container-title">Acai Berry</div>
</div>

<div class="container">
  <div class="container-title">Kiwi</div>
</div>

<div class="container">
  <div class="container-title">Mangosteen</div>
</div>

这些看起来都很完美，除了“Mangosteen”最终变成“Mangoste-en”。我不介意两个词的标题，但想避免任何一个词的标题被连字。最好在 JS 中覆盖这个来解决这个问题，还是有一个可以工作的 CSS 方法？

【问题讨论】：

看看this post。这可能会帮助你
这个词可以环绕吗？小字体是唯一的选择吗？
@wazz 我已经尝试了所有发布的方法，到目前为止它仍然显示在 2 行上。看起来调整为更小的字体是唯一的选择，假设使用 JS 将是做到这一点的唯一方法。

标签： javascript html css font-size

【解决方案1】：

在 CSS3.0 中试试这个：

div {
  word-wrap: break-word;
}

【讨论】：