web-dev-qa-db-fra.com

Puis-je empêcher le texte d'un bloc div de déborder?

Puis-je empêcher le texte d'un bloc div de déborder?

htmlcssoverflow
91
Gjr

Si vous voulez que le texte en débordement dans la div soit automatiquement sauté à la ligne au lieu d’être masqué ou de faire une barre de défilement, utilisez la commande 

Word-wrap: break-Word 

propriété.

127
Amalgovinus

Tu peux essayer:

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

#myDiv {
    overflow:hidden;
}

Consultez la documentation pour la propriété de débordement pour plus d'informations.

62
inkedmn

Vous pouvez utiliser la propriété CSS text-overflow pour tronquer des textes longs.

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

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

référence: http://makandracards.com/makandra/5883-use-css-text-overflow-to-truncate-long-texts

36
Mara Jimenez

Vous pouvez le contrôler avec CSS, il y a quelques options:

  • caché -> Tout le texte débordant sera caché.
  • visible -> Laisse le texte débordant visible.
  • scroll -> mettre des barres de défilement si le texte déborde

J'espère que ça aide.

15
Timothée Martin

il y a une autre propriété css:

white-space : normal;

La propriété white-space contrôle la manière dont le texte est traité sur l'élément auquel il est appliqué. 

div {

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

}
10
Sachin

Utilisez simplement ceci: 

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

Essayez d'ajouter cette classe afin de résoudre le problème:

.Ellipsis {
  text-overflow: Ellipsis;

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

Expliqué plus loin dans ce lien http://css-tricks.com/almanac/properties/t/text-overflow/

4
edward

overflow: scroll? Ou auto. dans l'attribut style. 

3
bean

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

.someClass{min-width: 980px;}

Cela ne se cassera pas, mais vous aurez toujours la barre de défilement à traiter.

1
Damir Olejar

Je suppose que vous devriez commencer par les bases de w3

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

div {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: Ellipsis;
}
1
Ronit
.NonOverflow {
    width: 200px; /* Need the width for this to work */
    overflow: hidden;
}

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

Si votre div a une hauteur définie dans css, cela le fera déborder en dehors de la div.

Vous pouvez donner à la div une hauteur minimale si vous avez besoin que la div soit à une hauteur minimale en tout temps.

Min-height ne fonctionnera pas dans IE6, cependant, si vous avez une feuille de style spécifique à IE6, vous pouvez lui attribuer une hauteur régulière pour IE6. La hauteur change dans IE6 en fonction du contenu.

0
Sir David of Lee

Recommandations pour savoir quelle partie de votre CSS est à l'origine du problème: 

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

2) Définissez style="border: 3px solid red;" sur tous les éléments <div> pour voir la largeur d'une zone occupée par la zone de votre <div>. 

3) Retirez toutes les propriétés 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>
0
Gene