Использование слова-разрыва: разрыв-слова; в фаерфоксе

У меня есть элемент div, который я использую для абзацев текста. Он предназначен для мобильных устройств, поэтому я тестировал его с разными размерами браузера/окна просмотра. У меня есть следующий код:

.text {
  font-size: 18px;
  word-break: break-word;
  overflow-wrap: break-word;
  width: 200px;
  border: red solid 1px;
}

<p class="text">Wordthatislongenoughtogetalineonitsown andawordthatfits fits</p>

Когда размер окна изменяется, в Chrome он выглядит нормально, w переходит на новую строку, а затем ломается. Однако в Firefox слова вообще не разрываются, а элемент div расширяется и включает весь текст, создавая полосу прокрутки внизу страницы.

Как я могу сделать так, чтобы слово ломалось в Firefox? Я пытался добавить white-space: pre-wrap;, но все, что он делает, это добавляет уродливые разрывы строк и даже не вызывает разрыв слова. Я не хочу использовать word-break: break-all;, потому что это разобьет каждое слово, и я хочу разбить только слова переполнения. overflow-wrap: break-word; тоже ничего не делал.

РЕДАКТИРОВАТЬ: я пытаюсь заставить его выглядеть так, и вот как это выглядит в Chrome: Chrome Success

Вот как это выглядит в Firefox (не то, что мне нужно): Ошибка Firefox

Вот как это выглядит с break-all, чего я тоже не хочу. Обратите внимание, как разрываются слова, когда они могут перейти на следующую строку: break-all