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


Respostas:


163

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.



O usuário precisa verificar isso como a resposta. Hoje funcionou para mim! Valeu cara!
Eduardo A. Fernández Díaz

oh meu Deus, muito obrigado por este, eu tenho literalmente enlouquecido bc de alguns problemas que eu poderia resolver com sua resposta !! XD
Sven



18

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.


15

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

11

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; 

}

1
Isso é realmente útil em combinação com overflow: hidden;
Koppor


4

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



1

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.


1

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.


1

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>

1
.NonOverflow {
    width: 200px; /* Need the width for this to work */
    overflow: hidden;
}
<div class="NonOverflow">
    Long Text
</div>

em outro texto multilíngue, isso oculta alguns caracteres de palavras longas.
Bhupi

0

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

&shy;

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.