Переносить содержимое, когда размер содержимого выходит за пределы родительского контейнера

Я хочу обернуть содержимое, когда размер содержимого превышает родительский div.

td{
  background: pink;
  width:20px;
}

td div{
  word-wrap: break-word;
}

<table>
  <tr>
    <td>
      <div>
              mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
              
      </div>
    </td>
  </tr>
</table>

Это не работает. Почему ?

Вы можете применить display: block; к td. Это не лучшее решение, но оно обернет содержимое внутри него.

— 31.07.2018 07:00

html css

31.07.2018 06:22

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Используйте свойство word-break: break-all; вместо word-wrap: break-word;.

td {
  background: pink;
  width: 20px;
}

td div {
  word-break: break-all;
}

<table>
  <tr>
    <td>
      <div>
        mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

      </div>
    </td>
  </tr>
</table>

31.07.2018 06:46

Ответ принят как подходящий

Используйте word-break: break-all;

td{
  background: pink;
  width:20px;
}

td div{
word-break: break-all;
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -o-pre-wrap; /* Opera 7 */
    white-space: pre-wrap;  /* CSS 2.1 */
white-space: pre-line; /* CSS 3 */
word-wrap: break-word; /* IE */
}

<table>
  <tr>
    <td>
      <div id= "mydiv">
              mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
              
      </div>
    </td>
  </tr>
</table>

31.07.2018 06:52

Другие вопросы по теме

Запрещение хрома автоматически предлагать причину для включения автозаполнения

Как работает анимация наведения кнопки CSS?

Transform: scaleX (), кажется, меняет высоту элемента

Кнопка не видна внутри границы

Удаление границы таблицы внутри tfoot и thead

Как подавить интервалы между абзацами одного и того же класса CSS?

Сделайте Web Modal похожим на Mac Finder

Как сделать так, чтобы SVG не занимал места в DOM?

Почему потомок CSS не распознается?

Ошибка при вызове функции во внешнем файле JavaScript

Переносить содержимое, когда размер содержимого выходит за пределы родительского контейнера

Ответы 2

Другие вопросы по теме

Похожие вопросы