Как предотвратить переполнение текста в CSS?

Если вы хотите, чтобы переполненный текст в div автоматически переводился на новую строку, а не скрывался или создавал полосу прокрутки, используйте

word-wrap: break-word

имущество.

Можешь попробовать:

<div id="myDiv">
    stuff 
</div>

#myDiv {
    overflow:hidden;
}

Дополнительные сведения см. В документации по свойству переполнения.

Вы можете использовать свойство CSS text-overflow для обрезки длинных текстов.

<div id="greetings">
  Hello universe!
</div>

#greetings
{
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; // This is where the magic happens
}

ссылка: http://makandracards.com/makandra/5883-use-css-text-overflow-to-truncate-long-texts

Короткий ответ

Просто используйте:

word-wrap: break-word;
white-space: pre-wrap
word-break: break-word;

Длинный ответ

1. word-wrap

Позволяет длинным словам переноситься на следующую строку.

Возможные значения:

• normal: Разрыв слов только в допустимых точках разрыва
• break-word: Позволяет разбивать неразрывные слова

div {
    width: 150px; 
    border: 2px solid #ff0000;
}

div.normal {
    word-wrap: normal;
}

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

<h2>word-wrap: normal</h2>
<div class="normal"> This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

<h2>word-wrap: break-word</h2>
<div class="break"> This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

2. white-space

Определяет, как обрабатываются пробелы внутри элемента.

Возможные значения:

• nowrap: текст никогда не переносится на следующую строку.
• pre-wrap: пробелы сохраняются браузером. Текст будет переноситься при необходимости и при переносе строки

div {
    width: 150px;
    border: 2px solid #ff0000;
}

div.nowrap {
    white-space: nowrap;
}

div.pre-wrap {
    white-space: pre-wrap;
}

<h2>white-space: nowrap</h2>
<div class="nowrap">This div contains a very long but normal paragraph with so many words and nothing else.</div>

<h2>white-space: pre-wrap</h2>
<div class="pre-wrap">This div contains a very long but normal paragraph with so many words and nothing else.</div>

3. word-break

Определяет, как слова должны разрываться при достижении конца строки.

Возможные значения:

• normal: правила разрыва строки по умолчанию.
• break-word: Чтобы предотвратить переполнение, слово может быть разорвано в произвольных точках.

div {
  width: 150px; 
  border: 2px solid #ff0000;
}

div.normal {
  word-break: normal;
}

div.break-word {
  word-break: break-word;
}

<h2>word-break: normal (default)</h2>
<div class="normal"> This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

<h2>word-break: break-word</h2>
<div class="break-word"> This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

Для версий white-space для конкретных браузеров используйте:

white-space: pre-wrap;      /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap;     /* Opera <7 */
white-space: -o-pre-wrap;   /* Opera 7 */

Вы можете управлять им с помощью CSS, есть несколько вариантов:

• скрытый -> Весь текст, переполненный, будет скрыт.
• visible -> Сделайте видимым переполнение текста.
• scroll -> поставить полосу прокрутки, если текст переполняется

Надеюсь, поможет.

есть еще одно свойство css:

white-space : normal;

Свойство white-space управляет обработкой текста в элементе, к которому он применяется.

div {

  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 

}

Попробуйте добавить этот класс, чтобы исправить проблему:

.ellipsis {
  text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

Более подробно по этой ссылке http://css-tricks.com/almanac/properties/t/text-overflow/

overflow: scroll? Или авто. в атрибуте стиля.

Теперь это свойство css:

word-break: break-all

Думаю, вам стоит начать с основ из w3

https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

div {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

Если ваш div имеет установленную высоту в css, это приведет к его переполнению за пределами div.

Вы можете присвоить div минимальную высоту, если вам нужно, чтобы она всегда была минимальной высотой в div.

Минимальная высота не будет работать в IE6, однако, если у вас есть таблица стилей, специфичная для IE6, вы можете задать ей обычную высоту для IE6. Высота изменяется в IE6 в соответствии с содержимым внутри.

Вы можете просто установить минимальную ширину в CSS, например:

.someClass{min-width: 980px;}

Он не сломается, но вы все равно будете иметь дело с полосой прокрутки.

Рекомендации, как определить, какая часть вашего CSS вызывает проблему:

1) установите style="height:auto;" на всех элементах <div> и повторите попытку.

2) Установите style="border: 3px solid red;" на всех элементах <div>, чтобы увидеть, насколько широкую область занимает ваше поле <div>.

3) Уберите все свойства css height:#px; из вашего CSS и начните заново.

Так например:

<div id="I" style="height:auto;border: 3px solid red;">I
    <div id="A" style="height:auto;border: 3px solid purple;">A
        <div id="1A" style="height:auto;border: 3px solid green;">1A
        </div>
        <div id="2A" style="height:auto;border: 3px solid green;">2A
        </div>
    </div>
    <div id="B" style="height:auto;border: 3px solid purple;">B
        <div id="1B" style="height:auto;border: 3px solid green;">1B
        </div>
        <div id="2B" style="height:auto;border: 3px solid green;">2B
        </div>
    </div>
</div>

!! Жесткий код впереди! В зависимости от окружающего кода и разрешения экрана это может привести к другому / нежелательному поведению

Если о скрытом переполнении не может быть и речи и требуется правильная расстановка переносов, вы можете использовать объект HTML с мягким переносом, где вы хотите, чтобы слово / текст разрывался. Таким образом, вы можете заранее определить предел прочности вручную.

­

Дефис появляется только тогда, когда слово нужно разорвать, чтобы не переполнить окружающий его контейнер.

Пример:

<div class="container">
  foo&shy;bar
</div>

Результат, если контейнер достаточно широкий и текст не будет выходить за пределы контейнера:

foobar

Результат, если контейнер слишком мал и текст действительно переполняет контейнер:

foo-
bar

.container{
  background-color: green;
  max-width: 30px;
}

Example 1 - container to small => text overflows container:

<div class="container">
  foobar
</div>

Example 2 - using soft hyphen => text breaks at predetermined break point:

<div class="container">
  foo&shy;bar
</div>

Example 3 - using soft hyphen => text still overflowing because the text before the soft hyphen is to long:

<div class="container">
  foobar&shy;foo
</div>

Дополнительная информация: https://en.wikipedia.org/wiki/Soft_hyphen