Firefox ломает слово от слеша

Question

Почему Firefox разбивает слова из / (косая черта) и - (дефис) в строки.

Пример с / и -

table {
  width: 100%;
}

<table>
  <tbody>
    <tr>
      <td>
        LoremipsumdolorsitametconsecteturadipisicingelitLaboredistinctionamdoloresmodiamet/etblanditiisarchitectsundolorem/qnullobcaecatnobilibermollitia/sialiquiodiomagncommodi.

      </td>
    </tr>
  </tbody>
</table>

---

Пример без / и -

table {
  width: 100%;
}

<table>
  <tbody>
    <tr>
      <td>
        LoremipsumdolorsitametconsecteturadipisicingelitLaboredistinctionamdoloresmodiametetblanditiisarchitectsundoloremqnullobcaecatnobilibermollitiasialiquiodiomagncommodi.
      </td>
    </tr>
  </tbody>
</table>

Оба примера хорошо работают в других браузерах, я пробовал overflow-wrap, но не работал.

Я использую Firefox 67.0 (64-bit).

Пожалуйста, откройте его в Firefox.

Answer 1

Похоже, что Mozilla рассматривает / и - в качестве разделителей пробелов. После небольшого исследования я предлагаю экранировать / и - с его html-эквивалентным кодом, прежде чем отправлять его в таблицу.

UPDATE
Нашел еще одно чистое CSS-решение, которое работает и в Mozilla

table {
  width: 100%;
}

table td { 
    word-break: keep-all; 
}

<table>
  <tbody>
    <tr>
      <td>
        LoremipsumdolorsitametconsecteturadipisicingelitLaboredistinctionamdoloresmodiamet/etblanditiisarchitectsundolorem/qnullobcaecatnobilibermollitia/sialiquiodiomagncommodi.

      </td>
    </tr>
  </tbody>
</table>

Вот небольшой фрагмент JS, который экранирует / и - в его эквивалентном HTML-коде.

var str = 'Loremipsumdolorsitametconsectetura-dipisicingelitLaboredistinctionamdol-oresmodiamet/etblanditiisarchitectsundolorem/qnullobcaecatnobilibermollitia/sialiquiodiomagncommodi.';

const escaped = str.replace(/\//g, '/').replace(/-/g, '-');

Answer 2

Если идея не прерывать линию вообще, тогда вы можете использовать white-space: nowrap;.

Answer 3

Просто добавьте word-break: keep-all; к тд в CSS, у меня работает

Answer 4

table {
  width: 100%;
}
table tr td {
    word-break: break-all;
}

<table>
  <tbody>
    <tr>
      <td>
        LoremipsumdolorsitametconsecteturadipisicingelitLaboredistinctionamdoloresmodiamet/etblanditiisarchitectsundolorem/qnullobcaecatnobilibermollitia/sialiquiodiomagncommodi.
      </td>
    </tr>
  </tbody>
</table>

Answer 5

Возможно, вы захотите попробовать HTML-код для прямого слэша и тире.

For / use /
For - use –

Подробнее здесь: https://www.ascii.cl/htmlcodes.htm