Comment faire pour Word wrap texte en HTML?

vous pouvez utiliser un trait d'Union doux comme ainsi:

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

cela apparaîtra comme

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

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

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

si c'est le cas.

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

   div {
    // set a width
    word-wrap: break-word
}

L ' word-wrap solution ne fonctionne que sous IE, et les navigateurs supportant CSS3 .

la meilleure solution de navigateur croisé est d'utiliser votre langage côté serveur (php ou autre) pour localiser de longues chaînes et placer à l'intérieur d'eux dans des intervalles réguliers l'entité html ​ Cette entité casse bien les longs mots, et fonctionne sur tous les navigateurs.

p.ex.

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

le seul qui fonctionne à travers 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é ça à l'épreuve des balles.

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;

une autre option utilise aussi:

div
{
   white-space: pre-line;
}

cela définira tous vos éléments div dans tous les navigateurs qui prennent en charge CSS1 (qui est à peu près tous les navigateurs courants aussi loin que IE 8)

ajouter 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" 

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

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

Essayez cette

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 Clamp de ligne montrent le nombre de lignes.

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

autres exemples ici .

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 CSS body try:

background-size: auto;

table-layout: fixed;

Essayez cette

div {display: inline;}

j'ai utilisé bootstrap. On dirait mon code html ..

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

utiliser" l'attribut 151910920 " avec la largeur requise. Principalement, mettre la largeur en pixels, pas en pourcentages.

width: 200px;
word-wrap: break-word;