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.
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:
Essaye ça:
div {
width: 200px;
word-wrap: break-word;
}
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?
word-break: break-all
et non word-wrap: break-all
. Erreur facile à faire
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;
}
white-space: normal;
trop avant que cela fonctionne.
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.
­
?
aaaaaa...aaaaa
en a­a­a­a­a­a­a...a­a­a­a
?
div {
// set a width
word-wrap: break-word
}
La word-wrap
solution ' ' 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
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.
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)
<pre>
élément que vous voulez avoir un retour à la ligne, cela fonctionne et word-break
ou word-wrap
non.
.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+ */
}
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"
text-overflow:ellipsis
autant que le prochain, mais ce n'est pas une réponse correcte à cette question. Il cherche à boucler les mots, pas à tronquer le débordement.
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 .
Une solution côté serveur qui fonctionne pour moi est: $message = wordwrap($message, 50, "<br>", true);
où se $message
trouve 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.
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.
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;
Essaye ça
div {display: inline;}
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;
}
text-justify
classe, vous pouvez donc l'utiliser à la place de.wrap-text
vous pouvez utiliser ce CSS
p {
width: min-content;
min-width: 100%;
}
essayer:
overflow-wrap: break-word;