Могу ли я предотвратить переполнение текста в блоке div?

Можно ли предотвратить переполнение текста в блоке div?

Ответ 1

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

word-wrap: break-word

свойства.

Ответ 2

Вы можете попробовать:

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

#myDiv {
    overflow:hidden;
}

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

Ответ 3

Вы можете использовать свойство text overflow для 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

Ответ 4

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

hidden → Все переполненные тексты будут скрыты.
visible → Пусть текст переполнен видимым.
прокрутка → установите полосы прокрутки, если текст переполняется

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

Ответ 5

существует другое свойство 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; 

}

Ответ 6

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

   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 */

Ответ 7

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

.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/

Ответ 8

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

Ответ 9

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

<div class="NonOverflow">
    Long Text
</div>

Ответ 10

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

.someClass{min-width: 980px;}

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

Ответ 11

Да. Вы можете использовать CSS - существует множество значений, которые вы можете использовать.

http://www.w3schools.com/Css/pr_pos_overflow.asp

inkedmm прав, это может быть поведение, которое вы хотите, но вы должны определить, так ли это.

Ответ 12

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

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

Min-height не работает в IE6, хотя, если у вас есть специальная таблица стилей IE6, вы можете дать ей обычную высоту для IE6. Изменение высоты в IE6 в соответствии с содержимым внутри.

Ответ 13

Рекомендации о том, как поймать, какая часть вашего 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>