Comment habiller du texte en HTML?

185

Comment le texte peut-il aimer aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa qui dépasse la largeur d'un div(par exemple 200px) peut-il être enveloppé?

Je suis ouvert à tout type de solution comme CSS, jQuery, etc.

Satya Kalluri
la source

Réponses:

240

Essaye ça:

div {
    width: 200px;
    word-wrap: break-word;
}
Alan Haggai Alavi
la source
1
Est-ce que je me trompe ou le word-wrap est une propriété CSS3?
Gab Royer
13
C'est CSS3, mais il fonctionne dans presque tous les navigateurs grand public, y compris IE5.5 -> 9 - caniuse.com/#search=word-wrap
Jon Hadley
32
Lorsque word-wrap: break-word; ne fonctionne pas essayez word-break: break-all; / * celui-ci est un tueur * /
redochka
@redochka Mais quand on l'utilise word-break: break-all;alors dans un texte normal, il casse les mots au milieu, ce qui est moche ... Ne pouvons-nous pas avoir un mélange des deux comportements?
pawamoy
5
Important: c'est word-break: break-allet non word-wrap: break-all. Erreur facile à faire
Simon_Weaver
58

Sur bootstrap 3, assurez-vous que l'espace blanc n'est pas défini comme «nowrap».

div {
  width: 200px;
  word-break: break-all;
  white-space: normal;
}
Lukaserat
la source
Génial. J'ai essayé d'utiliser word-break: break-all sur un corps de panneau Twitter Bootstrap 3 mais cela n'a jamais fonctionné. Ajout d'espaces blancs: le correctif était normal.
coolboyjules
5
Bien, j'avais besoin de white-space: normal;trop avant que cela fonctionne.
radbyx
56

Vous pouvez utiliser un trait d'union souple comme ceci:

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

Cela apparaîtra comme

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

si la boîte contenant n'est pas assez grande, ou

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Si c'est.

Kim Stebel
la source
18
Mais comment saurez-vous où mettre le ­?
Kostas
Vous le mettez en mots longs où ils peuvent être séparés. Vous pouvez même obtenir ces informations automatiquement à partir d'un dictionnaire approprié.
Kim Stebel
4
Mais qu'en est-il du charabia comme celui de l'exemple? Est-il acceptable de se transformer aaaaaa...aaaaaen a­a­a­a­a­a­a...a­a­a­a?
Kostas
19
Exactement ce que je cherchais. J'aime le fait qu'il soit trop timide pour faire quoi que ce soit jusqu'à ce qu'il le fasse ;-)
w00t
3
cela fonctionne bien si le mot à encapsuler est un overly.long.java.package.name ou une chaîne similaire avec de nombreux points. alors vous pouvez ajouter le & timide; après chaque point.
dokaspar
28
   div {
    // set a width
    word-wrap: break-word
}

La word-wrapsolution ' ' ne fonctionne que dans IE et les navigateurs prenant en charge CSS3.

La meilleure solution multi-navigateurs consiste à utiliser votre langage côté serveur (php ou autre) pour localiser de longues chaînes et y placer à intervalles réguliers l'entité html ​ Cette entité casse bien les mots longs et fonctionne sur tous les navigateurs.

par exemple

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
Orr Siloni
la source
8
"placez-y à intervalles réguliers l'entité html # 8203" mais lorsque vous essayez de copier le texte et de le coller quelque part, vous aurez un caractère Unicode aléatoire au milieu
user102008
9

Le seul qui fonctionne avec IE, Firefox, Chrome, Safari et Opera s'il n'y a pas d'espaces dans le mot (comme une longue URL) est:

div{
    width: 200px;  
    word-break: break-all;
}

J'ai trouvé que c'était à l'épreuve des balles.

Kyle Dearle
la source
9

Cela a fonctionné pour moi

word-wrap: normal;
word-break: break-all;
white-space: normal;
display: block;
height: auto;
margin: 3px auto;
line-height: 1.4;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
Amol
la source
6

Une autre option utilise également:

div
{
   white-space: pre-line;
}

Cela définira tous vos éléments div dans tous les navigateurs prenant en charge CSS1 (qui est à peu près tous les navigateurs courants depuis IE 8)

Andrew Marais
la source
Si vous avez un <pre>élément que vous voulez avoir un retour à la ligne, cela fonctionne et word-breakou word-wrapnon.
Pluto
4

Navigateur croisé

.wrap
{
    white-space: pre-wrap; /* css-3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Intemporel
la source
2

Ajoutez ce CSS au paragraphe.

style="width:420px; 
min-height:15px; 
height:auto!important; 
color:#666; padding: 1%; 
font-size: 14px; 
font-weight: normal;
word-wrap: break-word; 
text-align: left" 
Swapnil Godambe
la source
2
J'aime text-overflow:ellipsisautant que le prochain, mais ce n'est pas une réponse correcte à cette question. Il cherche à boucler les mots, pas à tronquer le débordement.
Spudley
1

Exemple de CSS Tricks :

div {
    -ms-word-break: break-all;

    /* Be VERY careful with this, breaks normal words wh_erever */
    word-break: break-all;

    /* Non standard for webkit */
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Plus d'exemples ici .

Juraj Guniš
la source
0

Une solution côté serveur qui fonctionne pour moi est: $message = wordwrap($message, 50, "<br>", true);où se $messagetrouve une variable de chaîne contenant le mot / les caractères à séparer. 50 est la longueur maximale d'un segment donné, et "<br>"est le texte que vous voulez insérer tous les (50) caractères.

deshbanks
la source
4
Cette solution ne fonctionnera pas si 50 fois la largeur des caractères est supérieure au maximum requis de 200 pixels. Utilisez simplement la fonction de zoom de votre navigateur et vous finirez par le voir casser ...
dokaspar
0

Essaye ça

div{
  display: block;
  display: -webkit-box;
  height: 20px;
  margin: 3px auto;
  font-size: 14px;
  line-height: 1.4;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

la propriété text-overflow: ellipsis add ... et line-clamp affiche le nombre de lignes.

Vladimir Salguero
la source
0

Dans le corps HTML, essayez:

<table>
    <tr>
        <td>
            <div style="word-wrap: break-word; width: 800px">
                Hello world, how are you? More text here to see if it wraps after a long while of writing and it does on Firefox but I have not tested it on Chrome yet. It also works wonders if you have a medium to long paragraph. Just avoid writing in the CSS file that the words have to break-all, that's a small tip.
            </div>
        </td>
    </tr>
</table>

Dans le corps CSS, essayez:

background-size: auto;

table-layout: fixed;
Wesson2
la source
0

Essaye ça

div {display: inline;}
Michael Mulikita
la source
0

J'ai utilisé bootstrap. Mon code html ressemble à ..

<div class="container mt-3" style="width: 100%;">
  <div class="row">
    <div class="col-sm-12 wrap-text">
      <h6>
        text content
      </h6>
    </div>
  </div>
</div>

CSS

.wrap-text {
     text-align:justify;
}
Rahul Wasnik
la source
Bootstrap a de la text-justifyclasse, vous pouvez donc l'utiliser à la place de.wrap-text
barbsan
0

vous pouvez utiliser ce CSS

p {
  width: min-content;
  min-width: 100%;
}
Rashid Iqbal
la source
0

essayer:

overflow-wrap: break-word;
Eden Sharvit
la source
-2

Utilisez l' word-wrap:break-wordattribut avec la largeur requise. Principalement, mettez la largeur en pixels, pas en pourcentages.

width: 200px;
word-wrap: break-word;
aks
la source
14
Ceci est identique à la réponse ci-dessus. Pourquoi s'embêter?
trgraglia