web-dev-qa-db-fra.com

Texte non enveloppé dans la balise p

J'ai deux div flottés, côte à côte, avec p balises à l'intérieur. Le texte dans les balises p ne recouvre pas et déborde simplement du conteneur, comme vous pouvez le voir dans le texte situé sous les images:

Example:

Mon HTML ressemble à ceci:

        <div class="submenu">
            <h3>Destinations in Europe</h3>
            <ul>
                <li><a href="#">dfgdgdgfgdg</a></li>
                <li><a href="#">dfgdgdgfgdg</a></li>
                <li><a href="#">dfgdgdgfgdg</a></li>
                <li><a href="#">dfgdgdgfgdg</a></li>
            </ul>
            <h3>Features</h3>
            <div>
                <img src="/assets/images/o/menu/city-feat-one.jpg" />
                <h4>blahblah</h4>
                <p>
                    khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhljhiououhljhiououhljhiououhljhiououhljhiououhl
                </p>
            </div>
            <div>
                <img src="/assets/images/o/menu/city-feat-two.jpg" />
                <h4>blahblah</h4>
                <p>
                    khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhl
                </p>
            </div>           
        </div>

Mon CSS:

#rb-menu-com li .submenu > div { 
    width:48%;
    float:left;
    position: relative;
}

#rb-menu-com li .submenu div p {
    color:#fff;
    margin: 0;
    padding:0;
    width:100%;
    position: relative;
}

#rb-menu-com li .submenu div img {
    border:1px solid #fff;
}

Est-ce que quelqu'un a déjà vécu cela? Je n'ai pas !! Me rend fou!

htmlcsstwitter-bootstrapcss3
34
Jon Hudson

Le retour à la ligne ne se produit que lorsqu'il y a une rupture de mot.

Si vous avez une "Parole" aussi longue que cela, alors il n'y a pas de place pour qu'elle se brise.

La solution appropriée consiste à écrire du contenu réel et non des chaînes de caractères insensées. Si vous utilisez du contenu généré par l'utilisateur, ajoutez une coche pour les mots exceptionnellement longs et interdisez leur utilisation (ou découpez-en une partie pour les URL tout en conservant l'intégralité du contenu dans un lien).

Alternativement, vous pouvez utiliser le Word-break Propriété CSS pour indiquer au navigateur de séparer la ligne au milieu des mots.

p { Word-break: break-all }

(Remarque support du navigateur ).

Vous pouvez également utiliser overflow pour tronquer le texte s'il ne rentre pas dans le conteneur.

65
Quentin

Donnez ce style à la <p> tag.

p {
    Word-break: break-all;
    white-space: normal;
}
71
Praveen Kumar Purushothaman

À tous ceux qui luttent encore, assurez-vous de vérifier si vous avez défini une valeur de hauteur de ligne sur la police en question: cela pourrait remplacer le retour à la ligne Word.

12
matthewsheets

C’est parce que vous avez un texte continu, cela signifie un seul long mot sans espace. Pour le casser ajouter Word-break: break-all;

.submenu div p {
    color:#fff;
    margin: 0;
    padding:0;
    width:100%;
    position: relative; Word-break: break-all; background:red
}

DÉMO

4
Sowmya

Ce n'est pas une réponse à la question mais comme j'ai trouvé cette page en cherchant une réponse à un problème que j'avais, je veux mentionner la solution que j'ai trouvée car elle m'a coûté beaucoup de temps. En espérant que cela sera utile aux autres:

Le problème était que le texte dans une balise <p> ne se plierait pas dans la div. Finalement, j'ai ouvert l'inspecteur et remarqué une "entité d'espace sans rupture" entre tous les mots. Mon éditeur, vi, ne faisait que montrer des espaces vides normaux (certains chr invisible, je ne sais pas quoi) mais j’avais copié collé le texte d’un document PDF. La solution consistait à copier un Remplacez-le par un espace vide de vi et remplacez-le par un espace vide, c'est-à-dire:% s///g, où le blanc à remplacer a été copié à partir du texte incriminé.

3
user1164594

Vous pouvez utiliser le retour à la ligne pour casser des mots ou une chaîne continue de caractères si elle ne tient pas sur une ligne d'un conteneur.

Word-wrap: break-Word;

cela continuera à couper les lignes aux points de rupture appropriés, sauf si une seule chaîne de caractères ne tient pas sur une ligne, dans ce cas, elle sera rompue.

JSFiddle

2
Kevin Oonk

FACILE

p{
    Word-wrap: break-Word;
}
0
Developer_D

Pour les autres qui se retrouvent ici, le css que je cherchais était

overflow-wrap: break-Word;

Ce qui ne cassera un mot que s’il le faut (la longueur du mot seul est supérieure à la largeur du p), contrairement à Word-break: break-all qui peut casser le dernier mot de chaque ligne.

démo de débordement

0
Ross Grambo