Posso impedir que o texto em um bloco div seja excedido?

Posso impedir que o texto em um bloco div seja excedido?

Se você deseja que o texto excedente na div seja automaticamente alinhado automaticamente em vez de ser oculto ou criar uma barra de rolagem, use o

word-wrap: break-word

propriedade.

Podes tentar:

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

#myDiv {
    overflow:hidden;
}

Confira os documentos da propriedade overflow para obter mais informações.

Você pode usar a propriedade CSS overflow de texto para truncar textos longos.

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

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

referência: http://makandracards.com/makandra/5883-use-css-text-overflow-to-truncate-long-texts

Você pode controlá-lo com CSS, existem algumas opções:

• oculto -> Todo o texto excedente será oculto.
• visible -> Deixe o texto transbordando visível.
• scroll -> coloca barras de rolagem se o texto exceder

Espero que ajude.

Simplesmente use isto:

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

existe outra propriedade css:

white-space : normal;

A propriedade de espaço em branco controla como o texto é tratado no elemento ao qual é aplicado.

div {

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

}

Tente adicionar esta classe para corrigir o problema:

.ellipsis {
  text-overflow: ellipsis;

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

Explicado ainda mais neste link http://css-tricks.com/almanac/properties/t/text-overflow/

overflow: scroll? Ou automático. no atributo style.

Eu acho que você deve começar com o básico da w3

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

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

Se sua div tiver uma altura definida em css, ela fará com que ela transborde para fora da div.

Você pode atribuir ao div uma altura mínima se precisar ter uma altura mínima no div o tempo todo.

A altura mínima não funcionará no IE6, se você tiver uma folha de estilo específica para o IE6, poderá definir uma altura regular para o IE6. A altura muda no IE6 de acordo com o conteúdo dentro.

Você pode apenas definir a largura mínima no css, por exemplo:

.someClass{min-width: 980px;}

Não quebrará, no entanto, você ainda terá a barra de rolagem para lidar.

Recomendações sobre como detectar qual parte do seu CSS está causando o problema:

1) defina style="height:auto;"todos os <div>elementos e tente novamente.

2) Defina style="border: 3px solid red;"todos os <div>elementos para ver a largura da área que a sua <div>caixa está ocupando.

3) Tire todas as height:#px;propriedades css do seu CSS e comece de novo.

Então, por exemplo:

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

!! Tradoff codificado à frente !! Dependendo do código circundante e da resolução da tela, isso pode levar a comportamentos diferentes / indesejados

Se o estouro oculto estiver fora de questão e for necessária a hifenização correta, você poderá usar a entidade HTML de hífen suave onde deseja que a palavra / texto seja quebrado. Dessa forma, você pode predeterminar um ponto de interrupção manualmente.

­

O hífen aparecerá apenas quando a palavra precisar ser quebrada para não exceder o contêiner ao redor.

Exemplo:

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

Resultado se o contêiner for grande o suficiente e o texto não exceder o limite:

foobar

Resultado se o contêiner for muito pequeno e o texto realmente estourar o contêiner:

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>

Mais informações: https://en.wikipedia.org/wiki/Soft_hyphen