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

Question

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

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 方法可以工作？

Answer 1

在 CSS3.0 中试试这个:

div {
  word-wrap: break-word;
}