web-dev-qa-db-fra.com

Comment envelopper des lignes longues sans espaces en HTML?

Si un utilisateur tape une longue ligne sans espace ni espace blanc, la mise en forme sera interrompue en élargissant l'élément actuel. Quelque chose comme:

HAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHAHA ................................................. .................................................. ..........................................

J'ai simplement essayé d'utiliser wordwrap() en PHP, mais le problème est que s'il existe un lien ou un autre code HTML valide, il se brise.

Il semble y avoir quelques options en CSS, mais aucune d’entre elles ne fonctionne dans tous les navigateurs. Voir Word-wrap dans IE.

Comment pouvez-vous résoudre ce problème?

phphtmlcsstextwrapping
67
Chris Bartow

Personnellement, je ne l'ai pas utilisé, mais Hyphenator semble prometteur.

Voir également les questions connexes (éventuellement en double):

7
Matt Kantor

en CSS3: 

Word-wrap:break-Word
120
Marcin

J'essayais de résoudre le même problème et j'ai trouvé la solution ici:

http://perishablepress.com/press/2010/06/01/wrapping-content/

Solution: ajouter au conteneur les propriétés CSS suivantes

div {
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    Word-wrap: break-Word;      /* IE 5+ */
}

L'idée est de les utiliser tous pour une meilleure compatibilité entre navigateurs.

J'espère que cela t'aides

42
Fernando Costas - Mercadosweb

J'aime utiliser le overflow: auto CSS appariement propriété/valeur. Cela rendra l'objet parent comme vous le souhaitiez. Si le texte dans le parent est trop large, des barres de défilement apparaissent dans l'objet même. Ainsi, la structure restera comme vous le souhaitez et le spectateur aura la possibilité de faire défiler l'écran pour en voir plus.

Éditer: ce qui est bien avec overflow: auto par rapport à overflow: scroll, c'est qu'avec auto, les barres de défilement n'apparaîtront que lorsqu'un contenu débordant existe. Avec scroll, les barres de défilement sont toujours visibles.

17
cLFlaVA

Je suis surpris que personne n'ait mentionné l'une de mes solutions préférées à ce problème, la balise <wbr> (saut de ligne facultatif). C'est assez bien supporté par les navigateurs et indique essentiellement au navigateur qu'il peut insérer un saut de ligne si nécessaire. Il y a aussi le caractère correspondant à l'espace zéro-largeur, &#8203; avec la même signification.

Pour le cas d'utilisation mentionné, affichant les commentaires des utilisateurs sur une page Web, je suppose qu'il existe déjà un format de sortie pour empêcher les attaques par injection, etc. Il est donc simple d'ajouter ces balises <wbr> à chaque N caractères. en mots trop longs, ou en liens.

Ceci est particulièrement utile lorsque vous avez besoin de contrôler le format de la sortie, ce que CSS ne vous laisse pas toujours faire.

6
Wylie

Je mettrais le message dans une div qui aurait un débordement de paramètre de largeur fixe pour faire défiler (ou pour masquer complètement en fonction du contenu).

tellement comme:

#post{
    width: 500px;
    overflow: scroll;
}

Mais c'est juste moi.

EDIT: Comme cLFlaVA fait remarquer ... il vaut mieux utiliser auto que scroll. Je suis d'accord avec lui.

5
Tim Knight

Il n'y a pas de solution "parfaite" HTML/CSS.

Les solutions cachent le débordement (par exemple, le défilement ou tout simplement masqué) ou se développent pour s’adapter. Il n'y a pas de magie. 

Q: Comment pouvez-vous adapter un objet de 100 cm de large dans un espace de 99 cm seulement?

A: Tu ne peux pas.

Vous pouvez lire break-Word

MODIFIER

Veuillez vérifier cette solution Comment appliquer un style de retour à la ligne/continuation et un formatage du code avec css

ou

Comment empêcher les longs mots de casser mon div?

2
inspite

J'esquive le problème en ne réglant pas ma barre latérale droite de la manière suivante: P

0
Jimmy

sur la base de la suggestion de Jon, le code que j'ai créé:

public static string WrapWords(string text, int maxLength)
    {
        string[] words = text.Split(' ');
        for (int i = 0; i < words.Length; i++)
        {
            if (words[i].Length > maxLength) //long Word
            {
                words[i] = words[i].Insert(maxLength, " ");
                //still long ?
                words[i]=WrapWords(words[i], maxLength);
            }
        }
        text = string.Join(" ", words);
        return (text);
    }
0
Ers

Ajoutez l’espace zéro largeur (&#8203;) à la chaîne et elle sera bouclée.

Voici un exemple Javacript:

let longWordWithOutSpace = 'pneumonoultramicroscopicsilicovolcanoconiosis';
// add &#8203; between every character to make it wrap
longWordWithOutSpace.split('').join('&#8203;');
0
Suresh

Voici ce que je fais dans ASP.NET:

  1. Divisez le champ de texte sur les espaces pour obtenir tous les mots
  2. Itérer les mots à la recherche de mots plus longs
  3. Insérer tous les x caractères (par exemple, tous les 25 caractères).

J'ai examiné d'autres méthodes CSS, mais je n'ai rien trouvé qui fonctionne entre plusieurs navigateurs.

0
Jon Galloway

Je ne voulais pas ajouter de bibliothèques à mes pages uniquement pour Word break . Ensuite, j'ai écrit une fonction simple que je fournis ci-dessous, j'espère que cela aidera les gens.

(Il est divisé par 15 caractères et applique "& timide;" entre, mais vous pouvez le changer facilement dans le code)

//the function:
BreakLargeWords = function (str)
{
    BreakLargeWord = function (Word)
    {
        var brokenWords = [];
        var wpatt = /\w{15}|\w/igm;
        while (wmatch = wpatt.exec(Word))
        {
            var brokenWord = wmatch[0];
            brokenWords.Push(brokenWord);
            if (brokenWord.length >= 15) brokenWords.Push("&shy;");
        }
        return brokenWords.join("");
    }

    var match;
    var Word = "";
    var words = [];
    var patt = /\W/igm;
    var prevPos = 0;
    while (match = patt.exec(str))
    {
        var pos = match.index;
        var len = pos - prevPos;
        Word = str.substr(prevPos, len);

        if (Word.length > 15) Word = BreakLargeWord(Word);

        words.Push(Word);
        words.Push(match[0]);
        prevPos = pos + 1;
    }
    Word = str.substr(prevPos);
    if (Word.length > 15) Word = BreakLargeWord(Word);
    words.Push(Word);
    var text = words.join("");
    return text;
}

//how to use
var bigText = "Why is this text this big? Lets do a wrap <b>here</b>! aaaaaaaaaaaaa-bbbbb-eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee";
var goodText = BreakLargeWords(bigText);
0
Cesar