web-dev-qa-db-fra.com

Comment faire pour envelopper le texte en HTML?

Comment un texte comme aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa qui dépasse la largeur d'une div (disons 200px) peut-il être entouré?

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

htmlcssword-wrap
162
Satya Kalluri

Essaye ça:

div {
    width: 200px;
    Word-wrap: break-Word;
}
217
Alan Haggai Alavi

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

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

Cela apparaîtra comme

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

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

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

si c'est.

51
Kim Stebel

Sur le 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;
}
50
lukaserat
   div {
    // set a width
    Word-wrap: break-Word
}

La solution 'Word-wrap' ne fonctionne que dans IE et les navigateurs prenant en charge CSS3.

La meilleure solution pour plusieurs navigateurs consiste à utiliser le langage côté serveur (php ou autre) pour localiser les chaînes longues et y insérer à intervalles réguliers l'entité html ​ Cette entité rompt bien les mots longs et fonctionne sur tous les navigateurs.

par exemple.

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
28
Orr Siloni

Le seul qui fonctionne sur IE, Firefox, Chrome, Safari et Opéra 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.

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

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 (ce qui correspond à peu près à tous les navigateurs habituels dès IE 8).

6
Andrew Marais

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
Swapnil Godambe

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
Timeless

Essaye ça 

div {display: inline;}
0
Michael Mulikita

Exemple tiré de astuces CSS :

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

Dans le corps CSS, essayez:

background-size: auto;

table-layout: fixed;
0
Wesson2

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;
}
0
Rahul Wasnik

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 indiquent le nombre de lignes.

0
Vladimir Salguero

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

0
deshbanks