Блог

Главная - Вопросы по программированию - Как я могу заставить текст выходить из div, но оставаться внутри области просмотра

Как я могу заставить текст выходить из div, но оставаться внутри области просмотра

#html #css

Вопрос:

Рассмотрим следующую разметку

 <div>
   <p> text here</p>
</div>

Когда длина текста небольшая, проблем нет.
Когда длина текста становится немного больше, я могу отображать текст за пределами div с white-space: nowrap помощью свойства CSS.
Однако, когда текст становится огромным, некоторая часть текста скрывается при перемещении за пределы области просмотра.Есть ли способ, которым я могу отобразить его во второй строке, когда он переполняет всю область просмотра, а не размер родительского элемента div.

Ответ №1:

Если вы поместите внутренний div вокруг текста внутри вашего div, вы можете заставить его иметь ширину 100vw и вернуть его пробел в нормальное состояние.

В этом фрагменте «исходному» (внешнему) div присвоен розовый фон, чтобы вы могли видеть его границы.

 div.outer {
  white-space: nowrap;
  width: 50%;
  background-color: pink;
}

div.inner {
  width: 100vw;
  white-space: normal;
} 
 <div class="outer">
  <div class="inner">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  </div>
</div>

Дополнительный (внутренний) элемент помещается туда, чтобы иметь дело с общим случаем. Возможно, вы сможете использовать элемент p вместо div.inner — это зависит от того, есть ли другой текст, например, вне внутреннего элемента в вашей конкретной настройке.

Комментарии:

1. Это не сработает, если у меня есть несколько элементов в столбце. Предположим, что 2 div занимают половину столбца каждый. Я хочу, чтобы приведенный выше вариант использования был во втором div, в этом случае будут внесены изменения, поскольку вы указали width: 100vw ;

2. Извините, я не думаю, что полностью понимаю. Не могли бы вы привести пример кода в своем вопросе, поскольку я предполагаю, что приведенный вами код слишком прост для вашего реального варианта использования.

3. Извините, что в первую очередь не предоставил надлежащего контекста. Перейдите по этой ссылке, чтобы увидеть проблему. jsfiddle.net/a2rgwx65

Ответ №2:

попробуйте overflow-wrap: break-word; Или word-break: break-all;

Метки: ,