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

132

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

Клемент Херреман
источник
1
почему ваш текст переполнен?
Вират Кадару,
3
@ViratKadaru ... потому что это 360pt григорианский Chant Serif
DukeDidntNukeEm

Ответы:

164

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

word-wrap: break-word

свойство.

Amalgovinus
источник
Пользователь должен проверить это как ответ. У меня сработало сегодня! Спасибо, приятель!
Эдуардо А. Фернандес Диас
Боже мой, большое спасибо за это, я буквально сошел с ума из-за некоторых проблем, которые я мог бы решить с помощью вашего ответа !! XD
Sven
77

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

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

#myDiv {
    overflow:hidden;
}

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

brettkelly
источник
34
Это не «документы», это веб-сайт с некоторой базовой информацией о HTML / CSS. Документы на w3.org
DisgruntledGoat,
18

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

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

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

Тимоти Мартин
источник
15

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

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 */
PMPR
источник
12

есть еще одно свойство 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; 

}
Сэчин
источник
1
Это действительно полезно в сочетании с overflow: hidden;
koppor
6

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

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

Эдвард
источник
4

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

боб
источник
1

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

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

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

Сэр Дэвид Ли
источник
1

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

.someClass{min-width: 980px;}

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

Дамир Олежар
источник
1

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

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

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

3) Уберите все height:#px;свойства css из своего 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>
Ген
источник
1
.NonOverflow {
    width: 200px; /* Need the width for this to work */
    overflow: hidden;
}
<div class="NonOverflow">
    Long Text
</div>
Киртан
источник
в многоязычном тексте, кроме этого, некоторые символы длинных слов скрываются от отображения.
Bhupi
0

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

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

&shy;

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

Пример:

<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

janDo
источник