अतिप्रवाह क्यों होता है: छिपा हुआ काम <td> में नहीं होता है?

Question

मुझे एक टेबल सेल मिला है जिसे मैं हमेशा एक विशेष चौड़ाई में रखना चाहूंगा। हालाँकि, यह अनपेक्षित पाठ के बड़े स्ट्रिंग्स के साथ काम नहीं करता है। यहाँ एक परीक्षण मामला है:

td {
  border: solid green 1px;
  width: 200px;
  overflow: hidden;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

बॉक्स के विस्तार के बजाय मुझे टेक्स्ट को बॉक्स के किनारे से कैसे काट दिया जाए?

Answer 1

यहाँ भी यही समस्या है ।

आप सेट करने की जरूरत है table-layout:fixed और साथ ही साथ, टेबल तत्व पर एक उपयुक्त चौड़ाई overflow:hiddenऔर white-space: nowrapतालिका कोशिकाओं पर।

---

उदाहरण

निश्चित चौड़ाई के कॉलम

तालिका की चौड़ाई तय चौड़ाई सेल (ओं) की तुलना में समान (या छोटी) होनी चाहिए।

एक निश्चित चौड़ाई वाले कॉलम के साथ:

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 100px;
}
td {
  background: #F00;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  border: solid 1px #000;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

कई निश्चित चौड़ाई वाले स्तंभों के साथ:

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 200px;
}
td {
  background: #F00;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  border: solid 1px #000;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

निश्चित और द्रव चौड़ाई स्तंभ

तालिका के लिए एक चौड़ाई निर्धारित की जानी चाहिए , लेकिन किसी भी अतिरिक्त चौड़ाई को केवल द्रव कोशिका (ओं) द्वारा लिया जाता है।

कई स्तंभों के साथ, निश्चित चौड़ाई और द्रव चौड़ाई:

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
td {
  background: #F00;
  padding: 20px;
  border: solid 1px #000;
}
tr td:first-child {
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

Answer 2

यह सिर्फ टीडी के तरीके हैं। मेरा मानना ​​है कि यह हो सकता है क्योंकि टीडी तत्व की 'डिस्प्ले' संपत्ति स्वाभाविक रूप से 'ब्लॉक' के बजाय 'टेबल-सेल' पर सेट है।

आपके मामले में, वैकल्पिक हो सकता है कि टीडी की सामग्री को डीआईवी में लपेटा जाए और डीआइवी को चौड़ाई और ओवरफ्लो लागू किया जाए।

<td style="border: solid green 1px; width:200px;">
    <div style="width:200px; overflow:hidden;">
        This_is_a_terrible_example_of_thinking_outside_the_box.
    </div>
</td>

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

Comments

यह काम करता है, लेकिन मैं हार गया vertical-align:middleऔर यहां तक ​​कि इसे DIV में जोड़ने से समस्या ठीक नहीं हुई।

— माइकल

Answer 3

TD पर TABLE और स्टाइल के लिए CSS table-layout:fixed;(और कभी-कभी width:<any px or %>) लागू करें white-space: nowrap; overflow: hidden;। फिर सीएसएस चौड़ाई को सही सेल या कॉलम तत्वों पर सेट करें।

गौरतलब है कि निश्चित-लेआउट तालिका स्तंभ चौड़ाई तालिका की पहली पंक्ति में सेल चौड़ाई द्वारा निर्धारित की जाती है। यदि पहली पंक्ति में TH तत्व हैं, और टीडी (और TH) पर चौड़ाई लागू होती है, तो चौड़ाई केवल TD की सामग्री पर लागू होती है (सफेद-स्थान और अतिप्रवाह को अनदेखा किया जा सकता है); तालिका कॉलम सेट टीडी चौड़ाई की परवाह किए बिना समान रूप से वितरित करेंगे (क्योंकि [पहली पंक्ति में TH पर निर्दिष्ट कोई चौड़ाई नहीं हैं)) और कॉलम में [गणना] समान चौड़ाई होगी; तालिका बाद की पंक्तियों में टीडी चौड़ाई के आधार पर कॉलम की चौड़ाई को पुनर्गणना नहीं करेगी। पहली सेल तत्वों पर चौड़ाई सेट करें जिससे टेबल का सामना होगा।

वैकल्पिक रूप से, और कॉलम चौड़ाई सेट करने का सबसे सुरक्षित तरीका तालिका में प्रत्येक निश्चित चौड़ाई COL पर सेट CSS चौड़ाई के साथ टैग <COLGROUP>और <COL>टैग करना है। सेल चौड़ाई संबंधित सीएसएस उस समय अच्छे से निभाता है जब तालिका अग्रिम में कॉलम की चौड़ाई जानती है।

Answer 4

मैं विशिष्ट मुद्दे से परिचित नहीं हूं, लेकिन आप td के अंदर एक div आदि चिपका सकते हैं और उस पर ओवरफ्लो कर सकते हैं।

Answer 5

यहाँ आपके लिए एक समाधान है, लेकिन मैं वास्तव में यह क्यों काम करता है समझ में नहीं आता:

<html><body>
  <div style="width: 200px; border: 1px solid red;">Test</div>
  <div style="width: 200px; border: 1px solid blue; overflow: hidden; height: 1.5em;">My hovercraft is full of eels.  These pretzels are making me thirsty.</div>
  <div style="width: 200px; border: 1px solid yellow; overflow: hidden; height: 1.5em;">
  This_is_a_terrible_example_of_thinking_outside_the_box.
  </div>
  <table style="border: 2px solid black; border-collapse: collapse; width: 200px;"><tr>
   <td style="width:200px; border: 1px solid green; overflow: hidden; height: 1.5em;"><div style="width: 200px; border: 1px solid yellow; overflow: hidden;">
    This_is_a_terrible_example_of_thinking_outside_the_box.
   </div></td>
  </tr></table>
</body></html>

अर्थात्, एक div में सेल सामग्री लपेटकर।

Comments

इसे और बेहतर बनाया जा सकता है जैसा कि यहाँ दिखाया गया है - विशेष रूप overflow:hiddenसे td, इससे निकाला जा सकता है और कैन की चौड़ाई divको 100% तक सेट किया जा सकता है ताकि यह किसी भी tdचौड़ाई (ऑटो-आकार वाले सहित!) के साथ काम करे

— रोमन स्टार्कोव

Answer 6

सबसे अच्छा समाधान है कि शून्य चौड़ाई के साथ टेबल सेल में एक div डाल दिया जाए। टीओबी टेबल कोशिकाएं अपनी चौड़ाई को उन चौड़ाई से विरासत में प्राप्त करेंगी जिन्हें थीड परिभाषित किया गया है। स्थिति: सापेक्ष और नकारात्मक मार्जिन की चाल होनी चाहिए!

यहाँ एक स्क्रीनशॉट है: https://flic.kr/p/nvRs4j

<body>
<!-- SOME CSS -->
<style>
    .cropped-table-cells,
    .cropped-table-cells tr td { 
        margin:0px;
        padding:0px;
        border-collapse:collapse;
    }
    .cropped-table-cells tr td {
        border:1px solid lightgray;
        padding:3px 5px 3px 5px;
    }
    .no-overflow {
        display:inline-block;
        white-space:nowrap;
        position:relative; /* must be relative */
        width:100%; /* fit to table cell width */
        margin-right:-1000px; /* technically this is a less than zero width object */
        overflow:hidden;
    }
</style>

<!-- CROPPED TABLE BODIES -->
<table class="cropped-table-cells">
    <thead>
        <tr>
            <td style="width:100px;" width="100"><span>ORDER<span></td>
            <td style="width:100px;" width="100"><span>NAME<span></td>
            <td style="width:200px;" width="200"><span>EMAIL</span></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span class="no-overflow">123</span></td>
            <td><span class="no-overflow">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></td>
            <td><span class="no-overflow">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></td>
    </tbody>
</table>
</body>

Comments

सीएसएस में घोषित अवधि के लिए उचित ब्लॉक सेटिंग्स होने पर, आपको स्पैन और डिव दोनों का उपयोग करना चाहिए। जैसा कि मुझे पता है, td में div भी होना चाहिए।

— ग्युल सुरामन

Answer 7

आपको तालिका की शैली विशेषताएँ सेट करनी होंगी: widthऔर table-layout: fixed;'अतिप्रवाह: छिपी;' विशेषता ठीक से काम करती है।

Imo यह बेहतर ढंग से काम करता है, फिर widthस्टाइल विशेषता के साथ divs का उपयोग करते हुए, विशेष रूप से जब गतिशील आकार की गणना के लिए इसका उपयोग करते हैं, तो तालिका में एक सरल DOM होगा जो हेरफेर को आसान बनाता है क्योंकि पैडिंग और मार्जिन के लिए सुधार की आवश्यकता नहीं होती है

एक अतिरिक्त के रूप में, आपको सभी कक्षों के लिए चौड़ाई निर्धारित करने की आवश्यकता नहीं है, लेकिन केवल पहली पंक्ति के कक्षों के लिए।

ऐशे ही:

<table style="width:0px;table-layout:fixed">
<tr>
    <td style="width:60px;">
        Id
    </td>
    <td style="width:100px;">
        Name
    </td>
    <td style="width:160px;overflow:hidden">
        VeryLongTextWhichShouldBeKindOfTruncated
    </td>
</tr>
<tr>
    <td style="">
        Id
    </td>
    <td style="">
        Name
    </td>
    <td style="overflow:hidden">
        VeryLongTextWhichShouldBeKindOfTruncated
    </td>
</tr>
</table>

Answer 8

मुझे अभी भी इसी तरह की समस्या है, और पहले <div>अंदर का उपयोग करना था <td>(जॉन मैकइंटायर का समाधान मेरे लिए विभिन्न कारणों से काम नहीं आया)।

ध्यान दें कि <td><div>...</div></td>यह एक div के लिए वैध स्थान नहीं है इसलिए इसके बजाय मैं एक सेट के <span>साथ उपयोग कर रहा हूं display:block;। यह अब ठीक है और काम करता है।

Answer 9

सबसे सरल और सरल समाधान जो काम करता है:

table { table-layout: fixed }

table td {     
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

Answer 10

अधिक सरल बनाने के लिए मैं td विच के अंदर एक textarea लगाने का प्रस्ताव स्वचालित रूप से अतिप्रवाह प्रबंधन है

<td><textarea autofocus>$post_title</textarea></td>

पर्याप्त होने की आवश्यकता है

Answer 11

<style>
    .col {display:table-cell;max-width:50px;width:50px;overflow:hidden;white-space: nowrap;}
</style>
<table>
    <tr>
        <td class="col">123456789123456789</td>
    </tr>
</table>

123456 प्रदर्शित करता है