web-dev-qa-db-fra.com

css Word wrap qui enveloppe Word entier sans les casser?

Je dois adapter un long texte à une largeur d'environ 300 pixels. J'utilise ceci css:

 div {      
      width: 300px;
      color:white;
      Word-wrap:break-Word;
      }

Mon problème est avec le Word-wrap:break-Word;. C'est casser des mots au milieu de la Parole. Mais ce dont j'ai besoin, c'est que les mots restent tels qu'ils sont et que le document soit suffisamment intelligent pour briser la ligne le cas échéant et garder les mots eux-mêmes intacts.

Est-ce possible? J'ai essayé toutes les options de Word-wrap mais rien ne fonctionne. Soit les paragraphes ne se brisent pas et le texte reste hors de l'écran, soit les mots se brisent et quelques lettres sont sur une ligne, tandis que les autres lettres se trouvent sur la ligne suivante.

EDIT: ajouter mon code pour former un exemple concret. L'ensemble de mon élément style:

<style type="text/css">
    p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px OpenSansHebrew-Regular}
    p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px OpenSansHebrew-Regular; min-height: 12.0px}

div {
    width: 300px;
    color:white;
    font-size:10px;
    Word-wrap:break-Word;
}

pre {white-space:break;}

</style>

Puis dans l'élément body:

<body bgcolor="#1fa0e2">
<p class="p1">
<div>
<bdo dir="rtl">
<pre>
    דירת 3 חדרים ברחוב ארתור רובינשטיין בתל אביב הוצעה באחרונה למכירה ב–2.5 מיליון שקל, ובסופו של דבר נמכרה ב–2.195 מיליון בלבד - פער של 12% בין המחיר המבוקש למחיר המכירה. בירושלים, דירת 4 חדרים ברחוב צביה יצחק הוצעה למכירה ב–1.6 מיליון שקל ונמכרה ב–40% פחות - 950 אלף שקל בלבד.

</pre>
</div>
</bdo>
<span class="Apple-converted-space"> </span></p>

</body>
</html>
htmlcssword-wrap
25
Eddy

Vous n'avez rien à faire de spécial. Normalement, le texte se divise entre les mots.

Si cela ne se produit pas, alors

  1. soit le conteneur est trop large
  2. le conteneur est explicitement défini pour ne pas casser du tout les espaces. Par exemple, s'il s'agit d'un <pre> élément, ou a le css white-space:pre; ou white-space:nowrap;.
  3. le texte contient des espaces insécables (&nbsp;) au lieu des espaces normaux.

Solution: utiliser

white-space: pre-wrap;

Il fera en sorte que l'élément se comportera comme un élément pre, sauf qu'il s'enroule également lorsque la ligne est trop longue. Voir aussi: http://css-tricks.com/almanac/properties/w/whitespace/

32
GolezTrol

Je plaisantais avec ça. Les gens n'ont pas mentionné la définition du style Word-break aussi. Les règles de rupture de mot par défaut doivent encapsuler le mot à la fin de l'espace de conteneur, mais ne gardent pas le mot intact.

La solution à votre problème en CSS serait donc:

pre{
    white-space: pre-wrap;
    Word-break: keep-all; /*this stops the Word breaking*/
}

Edit: je jouais avec cela plus loin et parce que j'utilise bootstrap, leur style semble beaucoup gâcher avec la balise pré. Utilisez le mot clé! Important pour remplacer leur style.

28
davidjohnclarke

Vous pouvez envelopper le mot avec un <span> tag et ajoutez white-space: nowrap ou display: inline-block.

2
JAT86

Note :: Assurez-vous que vos données ne se lisent pas comme .. Word&nbsp;Word&nbsp;Word ou des navigateurs autres que chrome pensez à son seul mot

Cela semble fou, mais un bug dans l'application mobile de notre entreprise faisait cela et jusqu'à ce que je vérifie nos données API, je pensais qu'Internet était en panne: p

1
Lux.Capacitor