Inline gói văn bản siêu liên kết trong thẻ neo HTML

Question

Tôi đang cố gắng tìm một cách để cho phép văn bản thực sự dài trong liên kết HTML để bọc trong khi chứa liên kết trong một hình chữ nhật nhỏ gọn.

Về cơ bản, tôi muốn điều này:

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

Thay vì:

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

Làm thế nào tôi có thể làm điều này?

Answer 1

Bạn có thể làm điều đó như thế này trong Firefox - nó không hoạt động trong IE mặc dù :(

<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

Bạn có thể sử dụng tài sản display:inline-block; css vào liên kết của bạn mà sẽ cung cấp cho bạn một cách chính xác hiệu quả mà bạn mong muốn (dont quên để thiết lập chiều rộng :)

display:.. inline-block không được hỗ trợ trong IE, nhưng may mắn cho bạn một người nào đó đã thực hiện công việc khó khăn và đưa ra một cách giải quyết here

Answer 3

tôi biết đây là khá cũ, nhưng nó vẫn là một trong những kết quả tìm kiếm đầu tiên cho tôi về chủ đề này. Tôi thấy rằng việc sử dụng:

white-space: pre-wrap; 

buộc neo để bọc các văn bản xung quanh hạn chế chiều rộng của tôi

Answer 4

tôi lên vết thương có vấn đề này bởi vì tôi đã sử dụng bootstrap và đó là theo mặc định thiết lập này là một trong đó là phong cách

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

khiến giữ "lời-break" và "width" thuộc tính css từ thực sự giải quyết vấn đề

Vì vậy, đầu tiên tôi đã phải thiết lập wh mà ite-không gian tài sản để "pre-wrap" thay vì