0
votes

CSS: empêcher le texte de déborder de l'élément div

J'utilise Bootstrap 4 et j'ai un div qui contient un long texte. Si le texte devient trop long, il déborde mon div .

Il ressemble à this .

L'ajout d'un espace (résultant en des mots plus courts) donne une apparence correcte.

Des mots longs comme " hhhhhhhhhhhhhhhhh " code > provoquera un débordement, comme dans l'image.

Mon code:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="p-1 mt-4 d-flex flex-wrap">
    <div class="p-1 m-1 d-flex flex-content-around shadow-lg p-2 mb-4 bg-white rounded box">
        <div class="my-auto">
            <img alt="pokemon pic" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/66.png" />
        </div>
        <div class="p-1 d-flex flex-column">
            <div class="p-0">
                <h3>Macgoooooo</h3>
            </div>
            <div class="p-0 d-flex flex-column flex-wrap">
                <div class="p-0">
                    <span>cought at</span>
                </div>
                <div class="p-0">
                    <small>2019-09-01</small>
                </div>
            </div>
        </div>
    </div>
</div>

J'aimerais vraiment savoir comment faire rentrer le texte dans la flexbox.

html css bootstrap-4

4 commentaires

Le code fonctionne parfaitement. Quel est exactement le problème?

avez-vous cliqué sur l'image que j'ai téléchargée ci-dessus? le texte va être à l'extérieur

J'ai vérifié le code que vous avez téléchargé. Tout est dans la boîte.

sur le mien n'est pas, j'utilise chrome, avez-vous ouvert ma photo ci-dessus ?? vous pouvez voir le texte Macgoooooo être en dehors de sa boîte

3 Réponses :

0
votes

Utilisez overflow-wrap: break-word; ^Docs comme ceci:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="p-1 mt-4 d-flex flex-wrap">
    <div class="p-1 m-1 d-flex flex-content-around shadow-lg p-2 mb-4 bg-white rounded box">
        <div class="my-auto">
            <img alt="pokemon pic" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/66.png" />
        </div>
        <div class="p-1 d-flex flex-column" style="display:inline-block; word-break: break-word;">
            <div class="p-0">
                <h3>Macgoooooo</h3>
            </div>
            <div class="p-0 d-flex flex-column flex-wrap">
                <div class="p-0">
                    <span>cought at</span>
                </div>
                <div class="p-0">
                    <small>2019-09-01</small>
                </div>
            </div>
        </div>
    </div>
</div>

4 commentaires

alors est-ce que cela cassera automatiquement le mot ??

c'est un attribut CSS qui fera l'affaire pour vous. Si cela aide, n'oubliez pas de voter et d'accepter

quand j'ai essayé d'ajouter ce style sur chrome html, cela ne change pas

ajoutez un autre attribut comme style = "display: inline-block; word-break: break-word;"

1
votes

Le code fonctionne parfaitement bien, mais s'il y a toujours un problème, vous devriez essayer ce qui suit pour ajouter dans votre css:

h3{
  word-break: break-all;
}

Cela cassera tous les mots longs et conservera tout en plusieurs lignes selon la longueur de votre mot.

0 commentaires

0
votes

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
for the width attribute, you need to use the width of the box

0 commentaires