J'ai codé style dans ce qui suit: et je ne vois aucune nulletinère en Firebug. Néanmoins, la largeur de table est calculée comme 812 px; pourquoi? Page réelle est ici (en russe): http://garmonia-znakomstva.ru/service.html update Puis-je ajouter des pauses de mots invisibles, ce qui causerait une rupture de mots et un trait d'union si un espace insuffisant et un mot continu si suffisamment d'espace?
6 Réponses :
Votre problème est causé par le fait que les mots individuels de chaque cellule de la table sont trop longs et vous n'avez pas précisé comment cela devrait être traité.
essayez d'ajouter: à votre table.GidTable TD règle.
Utilisation de Word-Break: Break-Tous est faux pour le russe, comme pour la plupart des langues. Cela signifie BR Eaking Wor DS arbit bilatéral sans la veille N Indiquez les rages de B.
Je crois que cette réponse est correcte et en ce qui concerne la valeur pause-all , eh bien, si vous connaissez CSS, vous savez qu'il existe également une option Break-Word si votre table contient du sens Les mots qui doivent être brisés sur des frontières de mots réelles.
C'est parce qu'il y a des mots dans la table, ce qui ne peut pas être enveloppé par défaut, le tableau ne peut donc pas se contracter. L'effet se produira: si vous essayez de définir le Cependant, dans CSS3, la propriété CSS Taille de police code> sur 1px code>, vous verrez que la largeur est exactement 400 pixels. P> Word-Break code> peut le gérer. P> word-break: break-all;
Ce n'est pas vrai. Utilisation de CSS3, etc., les mots peuvent être enveloppés (voir ma réponse).
@Benm: c'est. Habituellement, il ne peut pas , mais en effet dans CSS3, il peut être défini. (J'écris toujours ma réponse.)
Vous ne pouvez pas faire une table trop petite pour son contenu. Vous pouvez essayer de réduire la taille de la police ou d'essayer une mise en page différente (comme en utilisant moins de colonnes).
En ce qui concerne votre question mise à jour: Oui, vous pouvez ajouter des pauses de mots invisibles (voici un exemple: Comment envelopper Word de l'Opera Browser ) Mais c'est vraiment un dernier recours.
Le réglage de la largeur n'est pas ignoré; Il est simplement remplacé par les exigences minimales des contenus cellulaires. Dans chaque colonne, le mot le plus long détermine la plus petite largeur possible. Ceci est conforme aux spécifications CSS: Pour une table, la propriété "Le plus petit possible" est relatif, cependant. Vous pouvez activer la division Word de différentes manières. Mais pour voir où cela vous conduirait, vous pouvez tester en modifiant la balise Alternativement, essayez de régler le paramètre Je suggérerais ainsi que vous n'essayez pas d'appliquer une largeur aussi étroite, mais plutôt de retirer complètement la largeur et activez l'hyphénation. Le résultat est relativement bon. Pour une hyphénation, je suggérerais d'utiliser Hyphenator.js , une approche basée sur JavaScript qui fonctionne à travers les navigateurs; L'approche basée sur CSS a toujours un support de navigateur plutôt limité. largeur est par défaut juste une largeur minimale suggérée.
sur et en ajoutant la règle * {-MOZ-HOYHENS: AUTO} à votre CSS et testez la page sur Firefox. Vous verrez la table formatée de manière à ce que les mots soient hyphogènes et que la largeur est aussi proche de la largeur déclarée que vous pouvez obtenir de la sorte. Ça a l'air plutôt terrible. La largeur déclarée est tout simplement trop petite pour le contenu.
Table {layouche de table: fixe} dans CSS. Cela appliquera la largeur, peu importe quoi. Et cela rendra le débordement du contenu cellulaire hors des cellules. Je ne pense pas que vous aimerez cela non plus.
Mauvais lien. Ceci est le bon: mnater.github.io/hyphénator (même si je peux trouver un " démo "mais seulement un long texte à lire ...)
J'ai mis à jour le lien vers un hyphenator et supprimé le lien vers une démo.
Votre fichier CSS pourrait déjà définir blanc-espace: Nowrap; qui empêcherait l'emballage de mots.
L'application de cela explicitement m'a donné le bon résultat, la largeur est respectée, un texte long à l'aide de nouvelles lignes et de la hauteur (à la place de la largeur) en expansinant en conséquence.
td { white-space:normal}
Toutes les autres suggestions fonctionnent dans une certaine mesure, mais non dans des contextes complexes (Tabel dans DIV dans DIV, etc.), ou en effet, des mots rompus arbitrairement. Ajout * {White-Space: normal} à la feuille de style s'est avéré être la solution la plus complète et la plus simple.
Intéressant que la règle CSS
WIDTH n'est pas présente dans le style du document à laquelle l'URL relie ...Oui c'est:
style.css: 332 .