Est-il possible d'activer la coupure de mots automatique en HTML/CSS?

Mon client a demandé pour activer la coupure de mots automatique sur cette page: http://carlosdinizart.com/biography/ , et j'ai réalisé que je ne l'ai jamais vu faire sur une page web.

Est-il possible de mettre en place la césure automatique dans un document HTML avec juste du HTML/CSS? Si ce n'est pas ce que sont les options?

peut-être liés: stackoverflow.com/q/320184/104380

InformationsquelleAutor hanazair | 2012-01-20

40

CSS3 fournit un support pour cela. Source: http://drublic.de/blog/css3-auto-hyphenation-for-text-elements/
Vous pouvez vérifier le w3c documentation ici: http://www.w3.org/TR/2011/WD-css3-text-20110901/#hyphenation

CSS3 ajoute six propriétés de la liste de chose utile. Ce sont:
- Le plus important est hyphens.
- Vous pouvez ajouter un dictionnaire des fichiers avec hyphenate-resource de sorte que le navigateur a une meilleure chance de rendre votre texte avec le bouton droit de la césure.
- hyphenate-before fixe un nombre minimum de caractères avant la césure.
- hyphenate-after fait la même chose que hyphenate-before mais pour les personnages après la césure.
- hyphenate-lines définit sur le nombre de lignes d'un coupé mot est écrit à un maximum.
  avec hyphenate-character vous pouvez spécifier HTML entité devrait être utilisé, par exemple,\2010.
La propriété principale de cette pile est hyphens. Il accepte l'une des trois valeurs: none, manual ou auto. La valeur par défaut est manuel, où vous pouvez définir des traits d'union par . auto il mieux que l'on continue de texte tandis que les mots se diviser si possible et disponible. Et none n'a pas les traits d'union à tous, même si il y a un jeu de caractères pour un éventuel saut de ligne dans un certain mot.

Mise à jour:

Prise en charge du navigateur d'informations ici: http://caniuse.com/css-hyphens
- Intéressant. Aucune information sur la manière largement pris en charge c'est?
- J'ai mis à jour avec un lien qui répertorie les navigateurs pris en charge pour cette
- Je suis déçu dans Chrome et Opera. Bravo à IE et Firefox. Aussi, un vote pour un bien, je n'en avais pas entendu parler de ou à venir à travers.
- le respect, que les propriétés hyphenate-* ne font pas partie de CSS Standard plus.
- en effet, alors: w3.org/TR/css-text-3/#hyphenation
InformationsquelleAutor Ninja
13

Une option consiste à insérer doux traits d'union dans le texte dans des endroits où il peut être brisé. Le soft trait d'union est représentée par l'entité  en HTML. Vous pouvez trouver les bibliothèques/outils de préparer le texte automatiquement avec s dans les bons endroits, sinon vous devrez le faire manuellement.
- Teehee j'aime la façon dont il est abrégé. Ne soyez pas si timide!
- Yup,  est un de mes préférés des balises HTML. (Ai-je vraiment le dire? L'homme, je suis ringard. ;o))
- Je pense, que vous avez voulu dire "entités HTML", pas de "tags". 😉
- Le problème avec ceci est que de copier et coller du texte avec &timide; copie le doux caractère de trait d'union aussi. Il peut aussi gâcher Ctrl+F dans certains navigateurs.
InformationsquelleAutor deceze
9

À traiter avec une page qui a une largeur fixe pour le texte, la pratique serait d'ajouter un couple de DOUX traits d'union (U+00AD), à l'aide de l'entité de référence  si vous trouvez qu'il est plus à l'aise que d'entrer dans la (invisible) personnage lui-même. Vous pouvez assez rapidement trouver quels mots doivent être couplée à produire un bon résultat.

Dans un cas plus complexe (plusieurs pages, souple, largeur), utiliser un préprocesseur, ou le code côté serveur ou côté client, le code qui ajoute doux traits d'union. Côté client, l'approche est plus simple et peut être appliqué indépendamment de technologies côté serveur et des outils de création. Méfiez-vous que la césure automatique peut aller mal et a besoin d'aide: la ou les langue(s) du texte doivent être indiquées dans le balisage (ou autrement, selon la bibliothèque utilisée).

Au minimum, vous avez juste à mettre les attributs lang=en class=hyphenate dans le <body> étiquette et le code suivant dans la head partie:
```
<script 
  src="http://hyphenator.googlecode.com/svn/tags/Version%204.0.0/Hyphenator.js">
</script>
<script>Hyphenator.run();</script>
```
Démo: http://bytelevelbooks.com/code/javascript/hyphenation.html (souple-largeur du texte, avec seulement un maximum de largeur, de sorte que vous pouvez l'essayer en faisant varier la largeur de la fenêtre du navigateur).
- Apparemment, google n'héberge plus Hyphenator.js. C'est que la même chose aujourd'hui sur cdnjs?
InformationsquelleAutor Jukka K. Korpela

À l'heure actuelle mon css pour <p> est

p   {
    font-style: normal;
    padding: 0;
    margin-top: 0;
    margin-left: 0px ;
    margin-right: .5em ;
    margin-bottom: 0;
    text-indent: 1em;
    text-align: justify;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    word-break:break-word;
    hyphens: auto;
}

Cela ne fonctionne pas pour Chrome 39 sur Mac. Connu pour ne pas travailler sur l'Opéra.
Fonctionne pour Firefox, iOS Safari.

Ce n'est PAS infaillible: colonnes Étroites (moins de 6 mots) sont moche, mais dans l'ensemble ça rend la mise en page beaucoup plus comme correctement type de jeu.

InformationsquelleAutor Sherwood Botsford

Vous devez vous connecter pour publier un commentaire.