टीडी तत्व

Question

का नियंत्रण ओवरफ़्लो मुझे इसमें लंबे टेक्स्ट के साथ टीडी मिला है। मैं इसे लंबित करना चाहता हूं, लेकिन मैं इस कॉलम की पूर्ण चौड़ाई को परिभाषित नहीं करना चाहता - मैं चाहता हूं कि इसकी मूल तालिका द्वारा गतिशील रूप से गणना की जाए। क्या यह संभव है? चौड़ाई = 300px:

<table width="100%" border="3"> 
<tr> 
<td ><span style="white-space: nowrap; overflow: hidden; 
text-overflow: ellipsis;" > 
Here should be very long text: 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
</span></td> 
</table> 

वहाँ भी उदाहरण के लिए पूर्ण चौड़ाई के साथ 'काल' तत्व को परिभाषित करने के बिना अंडाकार प्रदर्शित करने के लिए IE ब्राउज़र के लिए मजबूर करने का कोई तरीका है: यहाँ उदाहरण के लिए एक कोड है?

Answer 1

सर्वश्रेष्ठ उत्तर मैंने पाया: परिभाषा के साथ तालिका में टीडी की लंबी सामग्री लपेटकर:
'टेबल लेआउट: तय' यह जादुई इस मुद्दे का समाधान होगा।

स्वयं देखें -

<table width="100%" border="3"> 
<tr> <td> 
<TABLE width=100% cellpadding=0 cellspacing=0 style='table-layout:fixed'><TR> 
<TD style='text-overflow: ellipsis; overflow: hidden; white-space: nowrap;'> 
Here should be very long text: 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
</TD></TR></TABLE> 
</td> 
</table> 

Answer 2

क्या आपने -ms-text-overflow का उपयोग करने का प्रयास किया है?

http://msdn.microsoft.com/en-us/library/ms531174(v=vs.85).aspx

Answer 3

समाधान jQuery का उपयोग कर ...

नोट: "पाठ-अतिप्रवाह: अंडाकार" FF4 में काम कर रहे हो करने के लिए प्रतीत नहीं होता।

डेमो: http://jsfiddle.net/vgfDd/1/

$w = $('.setWidth').attr('width'); 
$('.setWidth').find('span').width($w); 

सीएसएस ...

table { 
    border: 3px solid black; 
} 

span { 
    display: block; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

एचटीएमएल ...

<table width="100px" class="setWidth"> 
    <tr> 
     <td> 
      <span> 
       Here should be very long text: 
       bla bla bla bla bla bla bla 
      </span> 
     </td> 
     <td> 
      <span> 
       Here should be very long text: 
       bla bla bla bla bla bla bla 
      </span> 
     </td> 
    </tr> 
</table> 

Answer 4

नहीं! आईई तालिका को प्रदर्शित करने के तरीके को बदलने की इजाजत नहीं देता है, इसलिए यदि आप किसी तत्व की तरह तत्व का उपयोग नहीं करते हैं तो टेक्स्ट फिसल नहीं जाएगा। यदि आपको टेक्स्ट को क्लिप करने के लिए इलिप्सिस डालने की आवश्यकता है तो आपको पूर्ण चौड़ाई वाले स्पैन या div जैसे तत्व का उपयोग करना होगा।

स्वचालित रूप से इसे चालू करने के लिए आप जावास्क्रिप्ट का उपयोग कर सकते हैं या तालिका से div तक स्विच कर सकते हैं। मुझे आशा है कि यह आपकी मदद करेगा।

Answer 5

एक शुद्ध सीएसएस और जावास्क्रिप्ट (कोई jQuery आवश्यक) समाधान यहाँ उल्लिखित है: http://www.ruzee.com/blog/2007/08/ellipsis-or-truncate-with-dots-via-javascript

लेकिन आप ऊपर Vismari की टिप्पणी प्रति सामग्री रैप करने के लिए की आवश्यकता होगी।

Answer 6

मैं एक और तरीका बिना टेबल लेआउट काम करता पाया: तय की।

एक टीडी इनपुट मूल्य या प्लेसहोल्डर विशेषता का उपयोग कर में अपने संदर्भ रखो।

फिर इनपुट को स्टाइल करें सामान्य संदर्भ की तरह संपादित नहीं किया जा सकता है।

यह एक वास्तविक लचीली तालिका टीडी चौड़ाई के साथ काम करेगा।

<table> 
    <tr> 
    <td> 
     <input type="text" value="TitleTitleTitleTitle" /> 
    </td> 
    <td> 
     <input type="text" placeholder="ValueValueValueValue" /> 
    </td> 
    <td> 
     <input type="text" value="NumberNumberNumberNumber" /> 
    </td> 
    </tr> 
</table> 
<style> 
table{ 
    width: 100%; 
} 
td{ 
    input{ 
    display: block; 
    width: 100%; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    -webkit-user-select: none; 
    cursor: default; 
    } 
} 
</style> 

Answer 7

आप <table width="inherit"> का उपयोग यह पेरेंट तत्व से इसकी चौड़ाई वारिस के लिए करना चाहिए।