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.

Réponses:


240

Essaye ça:

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

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

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.


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

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.


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;

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)


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

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" 

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 .


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.


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.


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;


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

Bootstrap a de la text-justifyclasse, vous pouvez donc l'utiliser à la place de.wrap-text
barbsan



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

14
Ceci est identique à la réponse ci-dessus. Pourquoi s'embêter?
trgraglia
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.