Comment empêcher le texte de déborder en CSS ?

Question

Comment empêcher le texte d'un bloc div de déborder en CSS ?

div {
  width: 150px;
  /* what to put here? */
}

<div>This div contains a VeryLongWordWhichDoesNotFitToTheBorder.</div>

Answer 1

Je pense que la réponse à votre question se trouve dans la documentation du css. overflow propriété.

Answer 2

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

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

Answer 3

Si votre div a une hauteur définie en css, elle débordera en dehors de la div.

Vous pouvez donner à la division une hauteur minimale si vous souhaitez que la hauteur de la division soit toujours minimale.

La hauteur minimale ne fonctionnera pas dans IE6, mais si vous disposez d'une feuille de style spécifique à IE6, vous pouvez lui donner une hauteur normale pour IE6. La hauteur change dans IE6 en fonction du contenu.

Answer 4

Vous pouvez simplement définir la largeur minimale dans le fichier css, par exemple :

.someClass{min-width: 980px;}

Il ne sera pas cassé, mais vous devrez néanmoins faire face à la barre de défilement.

Answer 5

Des recommandations sur la manière d'identifier la partie de votre CSS qui est à l'origine du problème :

1) fixer style="height:auto;" sur tous les <div> éléments et réessayez.

2) Définir style="border: 3px solid red;" sur tous les <div> pour voir l'étendue de la zone que votre <div> La boîte de l'entreprise prend de la place.

3) Enlever tout le css height:#px; de votre CSS et recommencez.

Donc, par exemple :

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