सीएसएस या jquery

Question

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

ऐसा इसलिए है क्योंकि 100% चौड़ाई वाली तालिका ओवरफ्लो के साथ div के अंदर स्थित है: ऑटो (यह वास्तव में एक jQuery UI.Layout पैनल के अंदर है)।

मैंने overflow: hidden दोनों को आजमाया और पाठ अभी भी लपेट गया। मैंने white-space: nowrap की कोशिश की, लेकिन यह तालिका को 100% से अधिक विस्तृत किया और क्षैतिज स्क्रॉल बार जोड़ा।

div.container { 
    position: absolute; 
    overflow: auto; 
    /* user can slide resize bars to change the width & height */ 
    width: 600px; 
    height: 300px; 
} 
table { width: 100% } 
td.nowrap { 
    overflow: hidden; 
    white-space: nowrap; 
} 
<div class="container"> 
    <table> 
    <tr> 
     <td>From</td> 
     <td>Subject</td> 
     <td>Date</td> 
    </tr> 
    <tr> 
     <td>Bob Smith</td> 
     <td class="nowrap"> 
     <strong>Message subject</strong> 
     <span>This is a preview of the message body and could be long.</span> 
     </td> 
     <td>2010-03-30 02:18AM</td> 
    </tr> 
    </table> 
</div> 

वहाँ सीएसएस का उपयोग कर इस समस्या के समाधान के लिए एक रास्ता है? अगर मेरे पास एक निश्चित टेबल सेल आकार था, तो overflow:hidden जो कुछ भी बहती है उसे छोटा कर देगा, लेकिन मैं एक निश्चित आकार का उपयोग नहीं कर सकता क्योंकि मैं चाहता हूं कि तालिका UI.Layout पैनल आकार के साथ फैल जाए।

यदि नहीं, तो मैं इसे jQuery के साथ कैसे हल करूं?

मेरा उपयोग केस जीमेल इंटरफेस के समान है, जहां एक ईमेल विषय बोल्ड किया जाता है और संदेश निकाय की शुरुआत दिखाई जाती है, लेकिन फिर फिट करने के लिए छोटा कर दिया जाता है।

Answer 1

हो सकता है कि इस JQuery HTML Truncator by Henrik Nyh में मदद मिलेगी :)

Answer 2

आप पिक्सल में सेल के आकार निर्दिष्ट करने के लिए, तो आप बस प्रतिशत उपयोग कर सकते हैं की जरूरत नहीं है:

td.nowrap { 
overflow: hidden; 
white-space: nowrap; 
width: 60%; /* or whatever */ 
} 

Answer 3

अवधि पर इस प्रयास करें टैग टीडी

(देर से लेकिन किसी और की मदद कर सकते हैं)

Answer 4

यह काफी पुराना है लेकिन मेरा जवाब यहां है।

table { width: 100%; table-layout: fixed;} 

DEMO