बूटस्ट्रैप

Question

में लंबे लिंक छंटनी करें मैं बूटस्ट्रैप 3.1 का उपयोग कर एक पेज डिज़ाइन कर रहा हूं जिसमें एक HTML लिंक की लंबाई बहुत लंबा है, तो यह ओवरफ़्लो हो जाती है और मोबाइल संस्करण में एक क्षैतिज स्क्रॉल बनाता है। क्या इसे छेड़छाड़ करने और इलिप्स द्वारा इसे बदलने का कोई तरीका है?

उदाहरण:

क्या मैं जरूरत है कि बाहर का विस्तार करने के बजाय, यह सीमा से पहले छोटा कर दिया जाना चाहिए है। कोई विचार है कि ऐसा कैसे करें?

Answer 1

तुम्हें यकीन कंटेनर overflow: hidden है कि सीमा के बाहर बहने से पाठ रखने के लिए और यह text-overflow: ellipsis लिंक अंडाकार देने के लिए देने के लिए बनाने की जरूरत है।

.box { 
 
    background: #f99; 
 
    border: 1px solid #c66; 
 
    width: 100px; 
 
    padding: 7px; 
 
    margin-bottom: 15px; 
 
} 
 

 
.nowrap { 
 
    white-space: nowrap; 
 
} 
 

 

 
.ellipsis { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="box"> 
 
    <span class="nowrap">A really long piece of text</span> 
 
</div> 
 

 
<div class="box ellipsis"> 
 
    <span class="nowrap">A really long piece of text</span> 
 
</div>