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>

Все они выглядят идеально,за исключением "Мангостин", который заканчивается как "Мангост-ан". Я не против заголовка с двумя словами, но хочу избежать переноса слов из одного слова. Было бы лучше переопределить это в JS, чтобы исправить проблему, или есть метод CSS, который будет работать?

Answer 1

Попробуйте это в CSS3.0:

div {
  word-wrap: break-word;
}