Comment mot de placer du texte en HTML?

Comment peut-texte comme aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa qui dépasse la largeur d'un div (dire 200px) être enveloppé?

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

InformationsquelleAutor Satya Kalluri | 2009-07-18

223

Essayez ceci:
```
div {
    width: 200px;
    word-wrap: break-word;
}
```
- Je me trompe ou word-wrap est un CSS3, de la bienséance?
- Royer: Vous avez raison.
- C'est du CSS3, mais il fonctionne dans presque tous les navigateurs principaux, y compris IE5.5 -> 9 - caniuse.com/#search=word-wrap
- Lorsque word-wrap: break-word; ne fonctionne pas, essayez word-break: break-toutes; /*ceci est un tueur*/
- caniuse.com/#search=word-wrap
- Mais lors de l'utilisation de word-break: break-all; puis en texte normal il casse des mots dans le milieu, ce qui est laid... ne Pouvons-nous pas avoir un mélange des deux comportements ?
- Important: Il est word-break: break-all et pas word-wrap: break-all. Erreur facile à faire
- word-break: break-word m'a donné la fonctionnalité que je voulais. Il casse des mots longs de nouvelles lignes, mais empêche également la mise en forme (comme conteneur largeur) d'être brisé. À l'aide de word-break: break-all seulement le dernier.
InformationsquelleAutor Alan Haggai Alavi
54

Sur bootstrap 3, assurez-vous que l'espace n'est pas défini comme 'nowrap'.
```
div {
  width: 200px;
  word-break: break-all;
  white-space: normal;
}
```
- Grand. J'ai essayé à l'aide de word-break: break-le tout sur un Twitter Bootstrap 3 panneau de corps, mais elle n'a jamais travaillé. L'ajout de white-space:normal était le correctif.
- Nice, j'avais besoin de white-space: normal; trop avant, il a travaillé.
InformationsquelleAutor lukaserat
51

Vous pouvez utiliser un chiffon doux tiret comme suit:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Cela apparaîtra comme
```
aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa
```
si la boîte contenant n'est pas assez grand, ou comme
```
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
```
si il est.
- Mais comment allez-vous savoir où mettre les ?
- Vous l'avez mis dans les mots longs, où ils peuvent être séparés. Vous pouvez même obtenir des informations automatiquement à partir d'un convenable dictionnaire.
- Mais que diriez-charabia comme celui de l'exemple? Est-il ok pour aaaaaa...aaaaa en aaaaaaa...aaaa?
- Exactement ce que je cherchais. J'aime qu'il est trop timide pour faire quelque chose jusqu'à ce qu'il doit 😉
- cela fonctionne bien si le mot à habiller est un de trop.long.java.package.nom ou d'une même chaîne de caractères avec beaucoup de points. vous pouvez ensuite ajouter les &timide; après chaque point.
- c'est une mauvaise approche aujourd'hui les sites sensibles.
- J'aime cette. Pas besoin d'un stupide css quand je suis en utilisant ce en debug texte imprimé par un script php
InformationsquelleAutor Kim Stebel
28
```
   div {
    //set a width
    word-wrap: break-word
}
```
Le " word-wrap solution ne fonctionne que sous IE, et les navigateurs supportant CSS3.

Le meilleur navigateur croix solution est d'utiliser votre langage côté serveur (php ou autre) pour localiser les chaînes et les placer à l'intérieur d'eux à intervalles réguliers, le html entité 
Cette entité pauses le long des mots joliment, et fonctionne sur tous les navigateurs.

par exemple
```
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#8203;aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
```
- Aussi, jetez un oeil à quirksmode.org/oddsandends/wbr.html
- "place à l'intérieur d'eux à intervalles réguliers l'entité html #8203" mais ensuite, lorsque vous essayez de copier le texte et le coller quelque part, vous aurez un aléatoire de caractères Unicode dans le milieu
InformationsquelleAutor Orr Siloni
8

Le seul qui fonctionne sur IE, Firefox, chrome, safari et opera si il n'y a pas d'espaces dans le mot, comme une URL longue) est:
```
div{
    width: 200px;  
    word-break: break-all;
}
```
J'ai trouvé ceci pour être à l'épreuve des balles.

InformationsquelleAutor Kyle Dearle

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;

InformationsquelleAutor Amol

6

Une autre option est également à l'aide de:
```
div
{
   white-space: pre-line;
}
```
Cela va régler tous vos éléments div dans tous les navigateurs qui prennent en charge CSS1 (qui est à peu près tous les navigateurs les plus courants, en remontant aussi loin que IE 8)
- Si vous avez un <pre> élément que vous voulez avoir mot d'habillage, cela fonctionne et word-break ou word-wrap ne le font pas.
InformationsquelleAutor Andrew Marais

Croix-Navigateur

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

InformationsquelleAutor Timeless

2

Ajouter cette CSS pour le 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" 
```
- J'aime text-overflow:ellipsis autant que le gars à côté, mais ce n'est pas une réponse correcte à cette question. Il est à la recherche de retour à la ligne, ne pas tronquer le trop-plein.
InformationsquelleAutor Swapnil Godambe
0

Un serveur side solution qui fonctionne pour moi est: $message = wordwrap($message, 50, "<br>", true); où $message est une variable chaîne de caractères contenant le mot/caractères pour être brisées. 50 est la longueur max d'un secteur donné, et "<br>" est le texte que vous voulez insérer tous les (50) caractères.
- Cette solution ne fonctionnera pas si 50 fois la largeur des caractères est plus que le maximum de 200px. Il suffit d'utiliser votre navigateur les fonctions zoom et vous finirez par voir de pause...
InformationsquelleAutor deshbanks

Essayer cette

CSS:

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 ajouter ... et la ligne de serrage-afficher le nombre de lignes.

InformationsquelleAutor Vladimir Salguero

Exemple de CSS Astuces:

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.

InformationsquelleAutor Juraj Guniš

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>

En CSS corps à essayer:

background-size: auto;

table-layout: fixed;

InformationsquelleAutor Wesson2

0

Essayer cette
```
div {display: inline;}
```
InformationsquelleAutor Michael Mulikita

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 text-justify classe, de sorte que vous pouvez l'utiliser au lieu de .wrap-text

InformationsquelleAutor Rahul Wasnik

-2

Utilisation word-wrap:break-word attribut avec la largeur requise. Principalement, mettre
la largeur en pixels, et non en pourcentages.
```
width: 200px;
word-wrap: break-word;
```
- Ceci est identique à la réponse ci-dessus. Pourquoi s'embêter?
InformationsquelleAutor aks

Vous devez vous connecter pour publier un commentaire.