एचटीएमएल एंकर टैग में हाइपरलिंक टेक्स्ट की इनलाइन रैपिंग

Question

मैं एक कॉम्पैक्ट आयताकार में लिंक युक्त एक HTML लिंक में वास्तव में लंबे टेक्स्ट को अनुमति देने के लिए एक तरीका खोजने का प्रयास कर रहा हूं।

अनिवार्य रूप से, मैं यह चाहता हूँ:

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

बजाय

:

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

मैं यह कैसे कर सकते हैं?

Answer 1

आप Firefox में इस तरह यह कर सकते हैं - यह IE में काम नहीं करता है, हालांकि :(

<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

आप अपने लिंक पर display:inline-block; सीएसएस संपत्ति का उपयोग कर सकते हैं जो कि वास्तव में आप प्रभाव आप इच्छा दे देंगे (न चौड़ाई :) स्थापित करने के लिए भूल जाते हैं

प्रदर्शन:।। इनलाइन-ब्लॉक IE में समर्थित नहीं है, लेकिन भाग्यशाली आप किसी को पहले से ही कड़ी मेहनत किया है और एक समाधान here साथ आ गया है के लिए

Answer 3

मैं जानता हूँ कि यह है बहुत पुराना, लेकिन यह अभी भी पहले खोज परिणामों में से एक था जो इस विषय पर मेरे लिए आया था। मैंने पाया कि का उपयोग करते हुए:

white-space: pre-wrap; 

लंगर मजबूर मेरी चौड़ाई प्रतिबंध

Answer 4

मैं समापन क्योंकि मैं बूटस्ट्रैप उपयोग कर रहा था समस्या आ रही आसपास पाठ रैप करने के लिए और यह के रूप में यह में से एक शैली है इस सेटिंग डिफ़ॉल्ट रूप से था

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

कौन सा बनाया "शब्द-तोड़" और "चौड़ाई" वास्तव में समस्या

तो सुलझाने से सीएसएस गुण मैं पहली बार है कि क स्थापित करने के लिए किया था रखा इसके बजाय "प्री-रैप" के लिए इट-स्पेस प्रॉपर्टी