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

Question

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

Answer 1

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

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

#myDiv { 
    overflow:hidden; 
} 

Заканчивать the docs for the overflow property для получения дополнительной информации.

Answer 2

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

Answer 3

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

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

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

Answer 4

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

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

Answer 5

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

• скрытые -> Весь текст перетекание будет скрыт.
• видно -> Пусть текст переполнен видимым.
• прокрутки -> положить полосы прокрутки, если текст переполнение

Надеется, что это помогает.

Answer 6

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

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

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

Answer 7

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

word-wrap: break-word

.

Answer 8

есть другое свойство CSS:

white-space : normal; 

В пробельных элементах управления собственности как текст обрабатываются на элементе он применяется.

div { 

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

} 

Answer 9

Вы можете использовать текстовое переполнение 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

Answer 10

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

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

Answer 11

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

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

Answer 12

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

.someClass{min-width: 980px;} 

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

Answer 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>