Firefox отделяет слово от косой черты
Почему 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.
Ответы 5
Вы можете попробовать код HTML для косой черты и тире.
For / use /
For - use –Подробнее здесь: https://www.ascii.cl/htmlcodes.htm
Похоже, Mozilla рассматривает / и - как разделители пробелов. После небольшого исследования я предлагаю экранировать / и - с помощью эквивалентного HTML-кода, прежде чем выводить его в таблицу.
ОБНОВИТЬ
Нашел еще одно решение на чистом 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, '-');
Я избегаю решения JS, поэтому я не отметил JS, так как сталкиваюсь с этой проблемой во всем проекте, а JS может замедлить работу пользовательского интерфейса/UX. Хотя я рассматриваю JS как последний вариант.
Я обновил решение, которое представляет собой чистый CSS и работает и в Mozilla.
Второй вариант работает хорошо, давайте подождем еще хороших ответов, иначе я выберу ваш.
@PiyushMarvaniya По иронии судьбы вы использовали то же свойство в своем ответе и сказали, что этот ответ не работает.
@AbhishekPandey - я должен попробовать «сохранить все», но не работает нормально
table {
width: 100%;
}
table tr td {
word-break: break-all;
}<table>
<tbody>
<tr>
<td>
LoremipsumdolorsitametconsecteturadipisicingelitLaboredistinctionamdoloresmodiamet/etblanditiisarchitectsundolorem/qnullobcaecatnobilibermollitia/sialiquiodiomagncommodi.
</td>
</tr>
</tbody>
</table>Вы убрали все косые черты, вы убрали проблему вместо того, чтобы решить ее.
Просто добавьте word-break: keep-all; к td в CSS, у меня работает
Если идея состоит в том, чтобы вообще не разрывать строку, вы можете использовать white-space: nowrap;.
это динамический контент