Comment éviter les longs mots de casser mon div?

Depuis de commutation à partir de la TABLE de mise à DIV-mise en page, un problème commun demeure:

PROBLÈME: vous remplissez votre DIV avec du texte dynamique et, inévitablement, il y a un super-long mot qui s'étend sur le bord de votre div colonne et fait de votre site un aspect professionnel.

RÉTRO-PLEURNICHER: Ce jamais qui s'est passé avec les dispositions de table. Une cellule de tableau sera toujours joliment étendent sur la largeur du plus long mot.

GRAVITÉ: je vois ce problème, même sur les plus grands sites, en particulier sur les sites allemands où même les mots communs comme "limite de vitesse" sont très longues ("Geschwindigkeitsbegrenzung").

Quelqu'un a une solution à cela?

  • Vous devez avoir oublié ces super tendu et effectivement cassé des dispositions de table. Je vais prendre overflow:hidden toute la journée plus incontrôlable étirement des cellules.
  • Une cellule de tableau va toujours bien???????? s'étendent sur la largeur du plus long mot
  • Oui, en général assez bien, comme dans le cas du graphique ci-contre de Stackoverflow connexes de la colonne, si c'était un TABLEAU au lieu d'un DIV, il serait juste un peu plus larges et toujours agréable à regarder, très pragmatique. Ce serait une fonctionnalité intéressante pour être en mesure de tourner sur en DIV, quelque chose comme word-wrap:développez.
  • Je sais que beaucoup de gens (et je serais probablement compter moi-même entre eux) qui diront que c'est encore pire comme comportement. Page et la largeur de l'élément est généralement quelque chose qui a beaucoup de temps passé sur elle. Si vous pourriez avoir des mots au hasard de prise de largeurs incontrôlable, vous avez échoué avec votre conception.
  • J'ai toujours estimé que le comportement de table était plus en ligne avec le HTML d'origine de la philosophie de la flexibilité. La DIV/CSS rigide largeur de la colonne de la philosophie semble venir de la revue de designers qui ne peut pas traiter avec leurs colonnes, parfois large, parfois plus étroit.
  • Un bon design doit être cohérent, si le contenu de la page est en mesure de modifier les dimensions de l'INTERFACE, ce serait en violation de la conception. Sérieusement, d'où vous tirez la ligne avec un élastique de mise en page? Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch?
  • Je vois ce que tu veux dire. 😉
  • Oui cela a peu à voir avec le fait d'être ultra-stricte de la conception (à partir d'une arty-farty point de vue), et plus de garder les choses constante et utilisable. Avec des tables (et cette zone de commentaire) montrant tout le contenu a d'autres commentaires sont maintenant assez illisible.
  • (Si vous voulez lire ce commentaires, il suffit de copier et de les coller dans un éditeur de texte.)
  • Comment puis-je trouver la source de cette zone, pour voir si c'est un DIV ou si c'est vraiment une TABLE? Il n'est pas dans l'affichage de la source. N'ai-je pas accès au DOM actuel du texte, même si elle est injectée par AJAX?
  • Que ce soit une leçon que l'incorporation d'hébergement externe des images dans AINSI en question est Une Mauvaise Idée™.
  • Regardez la façon dont les journaux ont fait pendant des centaines d'années.
  • Un "up-to-date" réponse (2014) stackoverflow.com/questions/802175/...
  • Rappelle-moi de ne jamais jouer au Scrabble contre un allemand. Cette chose doit être d'une valeur de 300 points! L'2016 solution: Dans votre CSS, ajouter: word-wrap: break-word; Il peut y avoir un besoin pour les préfixes de navigateur en fonction de ce que vous êtes à la recherche à l'appui. Gardez également à l'esprit que l'élément ou de l'un des parents (quel que soit l'élément est de déterminer la largeur que vous voulez pour permettre l') doit avoir une largeur définie ou le word-wrap ne prendra pas effet. Espérons que cela aide.