पिक्सेल चौड़ाई

Question

पर आधारित ट्रंकेट स्ट्रिंग मैं ब्रेक लाइन के बिना एक निर्धारित क्षेत्र (td) में एक स्ट्रिंग फिट करने की कोशिश कर रहा हूं। समस्या यह है: यह करने की जरूरत है ...

• फ़िट जबकि संकल्प के N प्रकार में
• फ़िट आकार बदलने जब जरूरत
• अंत में ... जोड़ें (और जब जरूरत नहीं नहीं करते हैं)
• font-size, font-weight के परिवर्तन स्वीकार करें, और font-family

---

सीएसएस

.truncated { display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } 

jQuery (// बस लाइन तोड़ने के लिए कुछ शैलियों जोड़ने)(// खोजें:Novon's question पर जवाब के आधार पर, मैं निम्नलिखित कोड बनाया सभी टीडी जिसमें .truncated तत्व शामिल है। td की असली चौड़ाई (सामग्री को हटाकर और इसे फिर से जोड़कर) प्राप्त करना। को लागू करना, (ऊपर कोड से अपेक्षा के अनुरूप) td)

jQuery('.truncated').closest('td').each(function() { 
    var text = jQuery(this).text(); 
    var widthOriginal = jQuery(this).width(); 
    var widthEmpty = jQuery(this).text('').width(); 
    jQuery(this).text(text); 
    if(widthOriginal >= widthEmpty){ 
     var width = (parseInt(widthEmpty) - 10) + 'px'; 
     jQuery(this).css('maxWidth', width); 
     jQuery(this).text(text + '...'); 
    } 
}); 

परिणाम पर की जरूरत है, minWidth है:

लेकिन यह होना चाहिए:

---

मैं सोच रहा था, शायद स्ट्रिंग के पहले line को खोजने का प्रयास करें और बाकी को हटा दें लेकिन ऐसा करने का कोई तरीका नहीं मिला (और यह मेरे स्वाद के लिए "वर्कअराउंड" है)। क्या ऐसा करने का कोई बेहतर तरीका है?

.truncated { 
    display: -webkit-box; 
    -webkit-line-clamp: 1; // amount of line you want 
    -webkit-box-orient: vertical; 
} 

या आप क्लैंप की कोशिश कर सकते हैं:

Answer 1

आप शुद्ध सीएसएस के साथ ऐसा कर सकते हैं, संदर्भ के लिए इस लिंक को देख:

line clampin

अपने सीएसएस करने के लिए उन जोड़ें।js

https://github.com/josephschmitt/Clamp.js

Answer 2

लेख रैप दो बार इस लक्ष्य को हासिल करने के लिए:

<style type="text/css"> 

.relative_wrap { 
    height: 1em; 
    position: relative; 
} 

.absolute_wrap { 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    top: 0px; 
    white-space: nowrap; 
} 

</style> 


<table> 
    <tbody> 
     <tr> 
      <td> 
       <div class="relative_wrap"> 
        <div class="absolute_wrap"> 
          LONG TEXT HERE 
        </div> 
       </div> 
      </td> 
     </tr> 
    </tbody> 
</table> 

जब से तुम jQuery उपयोग करें, यह आसान है:

$('.truncated').wrap('<div class="relative_wrap"><div class="absolute_wrap"></div></div>'); 

Answer 3

आप के लिए तालिका लेआउट सेट करते हैं और तय td ओवरफ्लो hidden के रूप में, आपपर एक इलिप्सिस को फ्लोट-दाएं div के रूप में प्रीपेड कर सकते हैं 0 की स्क्रॉल चौड़ाई इसकी क्लाइंट चौड़ाई से अधिक है।

table { 
    table-layout:fixed; 
    white-space:nowrap; 
    width:500px; 
    border-spacing: 0px; 
    border-collapse: separate;  
} 

td { 
    overflow:hidden; 
    border:1px solid #ddd; 
    padding:0px; 
} 

.hellip { 
    padding-left:0.2em; 
    float:right; 
    background:white; 
    position:relative; 
} 

jQuery:

$('td').each(function() { 
    if($(this)[0].scrollWidth > $(this).width()) { 
    $(this).prepend('<div class="hellip"">&hellip;</div>'); 
    } 
}); 

डेमो में: http://jsfiddle.net/5h798ojf/3/

Answer 4

text-overflow: ellipsis 

लगता

यहाँ सीएसएस, जो मेज पर खून बहना के माध्यम से रोकने के लिए की शैलियां शामिल है एक शुद्ध सीएसएस समाधान http://www.w3schools.com/cssref/css3_pr_text-overflow.asp

Answer 5

सिंगल लाइन पाठ काट-छांट आसानी से सीएसएस text-overflow संपत्ति है, जो संस्करण 6.

के बाद से आईई सहित सभी प्रमुख ब्राउज़रों द्वारा समर्थित है का उपयोग कर प्राप्त किया जा सकता बात यह है कि text-overflow अकेले ज्यादा कुछ नहीं है। यह केवल परिभाषित करता है कि क्या होगा जब कंटेनर बहने वाला टेक्स्ट होगा। तो परिणाम देखने के लिए, हमें पहले इसे एक पंक्ति में मजबूर करके टेक्स्ट ओवरफ़्लो बनाने की आवश्यकता है। यह भी कंटेनर के overflow गुण सेट करने के लिए महत्वपूर्ण है:

.truncated { 
    display: block; 
    white-space: nowrap; /* forces text to single line */ 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

jsFiddle उदाहरण: https://jsfiddle.net/x95a4913/

पाठ-अतिप्रवाह प्रलेखन: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow