Чи можу я запобігти переповненню тексту в блоці div?

Чи можу я запобігти переповненню тексту в блоці div?

Якщо ви хочете, щоб текст, що переповнюється, передавав текст автоматично в новому рядку, а не був прихованим або створював смугу прокрутки, використовуйте

word-wrap: break-word

майно.

Ви можете спробувати:

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

#myDiv {
    overflow:hidden;
}

Перегляньте документи для властивості переповнення для отримання додаткової інформації.

Ви можете використовувати переповнення тексту властивості CSS для обрізання довгих текстів.

<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

Ви можете керувати ним за допомогою CSS, є кілька варіантів:

• приховано -> Весь переповнення тексту буде приховано.
• видимий -> Нехай текст буде переповнений видимим.
• прокручування -> поставити смуги прокрутки, якщо текст переповнюється

Сподіваюся, це допомагає.

Просто скористайтеся цим:

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

є ще одна властивість css:

white-space : normal;

Властивість пробілу контролює, як обробляється текст з елементом, до якого він застосовується.

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? Або авто. в атрибуті стилю.

Я думаю, ви повинні почати з основ w3

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

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

Якщо ваш div має встановлену висоту в css, це призведе до його переповнення поза 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>

.NonOverflow {
    width: 200px; /* Need the width for this to work */
    overflow: hidden;
}

<div class="NonOverflow">
    Long Text
</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