Разбить слово в таблице в Edge

Question

У меня есть таблица, подобная этой:

<div class="container">
  <div class="row">
    <div class="col-12">
      <table>
        <tbody>
          <tr>
            <td>some content</td>
            <td>http://insertreallylongurlhere</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Я использую этот CSS:

body {word-break: break-word;}

На мобильном телефоне (или на экранах небольшого размера) на Edge, длинный URLне ломается и перетекает за пределы экрана.

Работает нормально, за исключением Edge. Я знаю, что Edge на самом деле не нравится слово-разрыв: слово-разрыв.

Итак, я пробовал перенос слов: разрыв-слово и перенос через переполнение: разрыв-слово как на столе, так и на столе. тд. Тем не менее, кажется, что таблицам это не нравится.

Если я добавлю table-layout: fixed и width (например, width: 100%) к моей таблице, слова переносятся правильно, но стиль widthломает мой столЭто вырвалось из моего содержащего div.

Кто-нибудь знает другое решение этой проблемы?

Answer 1

Попробуйте использовать свойство overflow-wrap: break-word;, более подробную информацию, пожалуйста, отметьте свойство CSS overflow-wrap .

Кроме того, вы также можете попробовать использовать свойство word-break: break-all;вместо word-break: break-word;

<style>
    body {
        word-break: break-word;
    }

    table td {
        width: 100px;
        word-break:break-all;
    }
</style>
<div class="container">
    <div class="row">
        <div class="col-12">
            <table border="1">
                <tbody>
                    <tr>
                        <td>some content</td>
                        <td>http://insertreallylongurlhere</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Результат такой: