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?

Si vous voulez que le texte débordant dans le div soit automatiquement nouveau à la ligne au lieu d'être masqué ou de créer une barre de défilement, utilisez le

word-wrap: break-word

propriété.

Tu peux essayer:

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

#myDiv {
    overflow:hidden;
}

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

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

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

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

J'espère que ça aide.

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

il existe une autre propriété css:

white-space : normal;

La propriété d'espace blanc 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; 

}

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 en détail dans ce lien http://css-tricks.com/almanac/properties/t/text-overflow/

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

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

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

Vous pouvez donner à la div une hauteur min si vous avez besoin qu'elle soit une hauteur minimale sur la div à tout moment.

Cependant, la hauteur minimale ne fonctionnera pas dans IE6, si vous avez une feuille de style spécifique à IE6, vous pouvez lui donner une hauteur régulière pour IE6. La hauteur change dans IE6 en fonction du contenu à l'intérieur.

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

.someClass{min-width: 980px;}

Il ne cassera pas, néanmoins vous aurez toujours la barre de défilement à gérer.

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

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

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

3) Retirez toutes les height:#px;propriétés css 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>

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

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

!! Un compromis codé en dur à venir !! En fonction du code environnant et de la résolution de l'écran, cela peut entraîner un comportement différent / indésirable

Si le débordement masqué est hors de question et qu'une césure correcte est nécessaire, vous pouvez utiliser l'entité HTML à trait d'union souple à l'endroit où vous voulez que le mot / texte se coupe. De cette façon, vous pouvez prédéterminer manuellement un point de rupture.

­

Le trait d'union n'apparaîtra que lorsque le mot doit se rompre pour ne pas déborder de son conteneur environnant.

Exemple:

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

Résultat si le conteneur est suffisamment large et que le texte ne débordera pas le conteneur:

foobar

Résultat si le conteneur est trop petit et que le texte débordera réellement le conteneur:

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>

Plus d'informations: https://en.wikipedia.org/wiki/Soft_hyphen