Enveloppement en ligne du texte du lien hypertexte dans la balise d'ancrage HTML

Question

J'essaie de trouver un moyen d'intégrer du texte très long dans un lien HTML tout en contenant le lien dans un rectangle compact.

Essentiellement, je veux ceci:

 
         with a really, really 
    Here is some text long link that wraps and here is some more text. 
         around in a rectangle 

Au lieu de:

 
    Here is some text with a really, really long link that wraps 
    around in a rectangle and here is some more text. 

Comment puis-je faire cela?

Answer 1

Vous pouvez le faire comme ça dans Firefox - il ne fonctionne pas dans IE :(si

<p>Here is some text <a href="#">with a really, really long link that wraps</a> around in a rectangle and here is some more text. 


<style type="text/css"> 

a {display: inline-block; max-width: 100px; vertical-align: middle;} 

</style> 

Answer 2

Vous pouvez utiliser display:inline-block; propriété CSS sur votre lien qui l'effet que vous vous donnera exactement le désir (Do not oublier de régler la largeur :)

affichage:.. inline-block est pas pris en charge dans IE, mais la chance pour vous que quelqu'un a déjà fait le travail dur et trouver une solution here

Answer 3

Je sais que c'est assez vieux, mais c'était toujours l'un des premiers résultats de recherche qui me revenaient sur le sujet. Je trouve que l'utilisation:

white-space: pre-wrap; 

forcé l'ancre pour envelopper le texte autour de mes restrictions de largeur

Answer 4

Je Blessez avoir ce problème parce que j'utilisais bootstrap et il était par défaut la mise en ce que l'un de ses styles

.dropdown-menu > li > a{ 
    white-space: nowrap; 
} 

qui a gardé le « mot-break » et « largeur » propriétés CSS de résoudre effectivement le problème

donc j'ai dû mettre que wh ite-space propriété de "pré-wrap" à la place