एक यूआरएल

Question

में एक लाइन ब्रेक को मजबूर करें मुझे अपने ब्लॉग पर ट्विटर फ़ीड मिला है। यह बहुत अच्छा काम कर रहा है, लेकिन ट्वीट्स में लंबे यूआरएल के साथ एक मुद्दा है। लंबे यूआरएल कंटेनर की चौड़ाई को बढ़ाकर लेआउट तोड़ते हैं।

मेरे कोड इस तरह दिखता है:

<ul id="twitter_update_list"> 
    <!-- twitter feed --> 
</ul> 

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> 
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&amp;count=3"></script> 

blogger.js स्क्रिप्ट कॉलबैक फ़ंक्शन जो ट्विटर अनुरोध से डेटा लेता है और एक पूर्वनिर्धारित <ul> करने के लिए <li> तत्वों भरता शामिल हैं।

मैं निम्नलिखित सीएसएस का उपयोग कर रहा स्वचालित रूप से (जो इसका समर्थन ब्राउज़र के लिए) लाइन तोड़ने के लिए:

#twitter_update_list li span a { 
    word-wrap: break-word; 
} 

मैं <wbr> टैग के बारे में पता है और एक jQuery समारोह है कि तरह देखा के साथ इसका इस्तेमाल करने की कोशिश कर रहा था यह:

$(document).ready(function(){ 
    $("#twitter_update_list li span a").each(function(){ 
     // a replaceAll string prototype was used here to replace "/" with "<wbr>/" 
    }); 
}); 

हालांकि जब मैंने उस स्निपेट का उपयोग करने का प्रयास किया, तो यह आईई को प्रतिक्रिया देना बंद कर देगा और यह अच्छा नहीं है।

मैं कोड के ब्लॉक की तलाश में हूं, मैं बस ड्रॉप कर सकता हूं जो लाइन ब्रेक इश्यू को ठीक करेगा (लंबे यूआरएल में लाइन ब्रेक जोड़कर)। फ़ायरफ़ॉक्स और क्रोम ठीक से काम कर रहे हैं, लेकिन आईई 7 और आईई 8 को कुछ और चाहिए। (मुझे आईई 6 के बारे में परवाह नहीं है।)

Answer 1

white-space सीएसएस संपत्ति के साथ खेलने का प्रयास करें।

चेक अधिक जानकारी के लिए इस लिंक: http://perishablepress.com/press/2010/06/01/wrapping-content/

Answer 2

मैं तुम्हें नरम हाइफ़न हैं जो खोज रहे हैं विश्वास करते हैं। यह थोड़ी देर पहले एएलए द्वारा कवर किया गया था।

http://www.alistapart.com/articles/the-look-that-says-book/

Answer 3

मैं जानता हूँ कि इस पुरानी पोस्ट है लेकिन जब से मैं एक संबंधित गूगल खोज के साथ यहाँ समाप्त हो गया - क्या कोई और भी हो सकता है।

मैं एक लंबे यूआरएल भंगुर बनाने के लिए आवश्यक है, और के बाद से अपनी साइट के लिए प्रयोग करने योग्य नहीं था (एचटीएमएल 5 मानकों में नहीं यानी, और IE8 इसे अनदेखा करने लगता है)

<style>.wbr { display: inline-block; width: 0px;}</style> 

के बाद से मैं यूआरएल मैं था उत्पन्न स्लेश से पहले <span class="wbr">&nbsp;</span> डालने में सक्षम।

तो मैं के साथ समाप्त हो गया:

www.example.com<span class="wbr">&nbsp;</span>/somepath<span class="wbr">&nbsp;</span>/blah.php 

जो ब्राउज़र में सामान्य दिखता है, लेकिन/निशान पर शब्द wraping से की अनुमति देता है

www.example.com/somepath/blah.php 

आशा है कि अगले व्यक्ति जो दौरा

Answer 4

में मदद करता है

आप इसका उपयोग करने का प्रयास कर सकते हैं: word-break: break-all;

div { 
 
    background: lightblue; 
 
    border: 1px solid #000; 
 
    width: 200px; 
 
    margin: 1em; 
 
    padding: 1em; 
 
} 
 
.break { 
 
    word-break: break-all; 
 
}

<div> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate vitae fugiat fuga fugit cum <a href="" class="break">http://www.ThisLongTextBreaksBecauseItHasWordBreak-BreakAll.com</a> facere mollitia repellat hic, officiis, consequatur quam ad cumque dolorem doloribus ex magni necessitatibus, nisi accusantium.</p> 
 
    
 
    <p>Voluptatibus atque inventore <a href="">http://www.looooooooooooooooooooooooooooongURL.com</a> veritatis exercitationem nihil minus omnis, quisquam earum ipsum magnam. Animi ad autem quos rem provident minus officia vel beatae fugiat quasi, dignissimos 
 
    sapiente sint quam voluptas repellat!</p> 
 
</div>

बस केवल लिंक करने के लिए इस आवेदन करने के लिए सुनिश्चित हो। अन्यथा, अन्य सभी शब्द भी तोड़ देंगे।:)