12
votes

Briser d'énormes urls afin qu'ils ne débordent pas trop

Y a-t-il un moyen de forcer d'énormes URL telles que http://www.google.de/search?q=65daysofstatic&phl=fre&safe=off&prmd=ivnsl&source=lnms&tbm=isch&ei=p9nktocrmorhsgaunaclcg&sa=x&oi=mode_link&ct=Mode&cd= 2 & VED = 0CBKQ_AUOAQ & BIW = 1697 & BIH = 882 BREAKED quand rendu sur le site Web? Je préférerais la raccourcir mais où je travaille, ils m'ont demandé d'afficher l'URL entière mais que je n'ai que 320 px pour le montrer et déborder.

Overflow: Caché, n'est pas une option et l'ajout d'un style à la TD où l'URL est contenue est simplement ignorée.


11 commentaires

Apparemment, la réponse est oui. Donc, semble simplement les envelopper dans un bloc de code.


Vous voulez dire à côté des manipulations JavaScript qui inséreraient une version abrégée de l'URL? Considérez-vous également la possibilité d'utiliser un service de raccourcisseur d'URL externe?


Une possibilité serait de remplacer '&' avec " - alors il enveloppait la largeur allouée. Malheureusement, si quelqu'un veut la copier et coller dans un navigateur, ils devraient retirer les espaces manuellement.


@Mimisbrunnr les a mis entre comme ça? URL énorme


@Aleksg qui ne devrait pas arriver car ils n'ont besoin que de voir l'URL complète (autant que je sache), mais l'URL est ajoutée automatiquement à l'aide de PHP, où devrais-je faire cela?


@Aleks - C'est seulement parce que je n'avais pas tiré l'inspecteur Web pour voir comment cela la manipulait et ne l'avait pas encore mis à jour.


Non, ne les mettez pas à l'intérieur, convivial cliquez sur moi


@Mimisbrunnr a mais la chose est que le lien doit être complètement visible, d'où mon problème


@Luis - Le lien lui-même est-il vraiment contextuel ou est-ce juste une obligation idiote que vous avez besoin de trouver un moyen de les parler? Il ne semble pas raisonnable qu'un très long lien soit utilisable par un humain directement (sauf pour cliquer sur, que la solution aiderait beaucoup avec).


@tvanfosson probablement la meilleure chose à faire serait de trouver un moyen de les parler, laissez-moi essayer le


@Luis Oops, vient de relire mon commentaire. Aurait dû être ne vous aiderait pas beaucoup


5 Réponses :


15
votes

CSS3 a une nouvelle fonctionnalité: xxx

Vous pouvez voir un exemple en direct Ici (vous devez avoir un navigateur compatible avec cette nouvelle fonctionnalité).

C'est aussi la même tecnique adoptée par Stackoverflow, si vous examinez votre longue URL, vous remarquerez.

Vous pouvez également essayer Hyphenator .


0 commentaires

9
votes
-ms-word-break: break-all;
     word-break: break-all;

     // Non standard for webkit
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
The above works in Internet Explorer 8+, Firefox 6+, iOS 4.2, Safari 5.1+ and Chrome 13+.

0 commentaires

2
votes

J'utilise cette règle pour affecter uniquement les ancres.

.my-paragraph p a[href] {
  word-wrap:break-word;
}


0 commentaires

17
votes

en chrome, Word-Wrap code> ne fonctionne pas. Vous devez utiliser: xxx pré>

Si vous souhaitez l'appliquer uniquement sur une balise, vous devez utiliser: p> xxx pré>

Notez que Break-All Code> va même diviser les mots, alors un mot peut commencer sur une ligne et se terminer sur une autre, c'est pourquoi c'est une bonne idée de l'appliquer uniquement sur les balises A code>. Si vous savez que vos liens contiennent toujours des mots (par exemple, ne sont pas quelque chose comme MyLink / abcdefghijklmnopqrstuvwxyz1234567890abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz1234567890abcdefghijklmnopqrstuvwxyz1234567890), vous pouvez appliquer ce qui suit au niveau de l'étiquette du corps (de cette façon un mot n'est pas divisé sur 2 lignes): p>

body {word-break: break-word;}


2 commentaires

Word-Wrap: Break-Word; n'a pas fonctionné pour moi (sur chrome). Je pense que cela devrait être élevé comme la réponse. Merci.


Merci! Ne travaillait pas sur Chrome et c'était me tuer! Cela devrait être la réponse acceptée.



0
votes

Essayez ci-dessous Propriétés CSS forts> pour montrer une URL de texte longue à Short ...

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
max-width: 40%;


0 commentaires