सवाल अतिप्रवाह क्यों होता है: में काम नहीं किया जाता है?


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

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>

बॉक्स को विस्तारित करने के बजाय, बॉक्स के किनारे पर टेक्स्ट को काटने के लिए मैं टेक्स्ट कैसे प्राप्त करूं?


127
2018-02-04 01:06


मूल




जवाब:


यहाँ है एक ही समस्या है

आपको सेट करने की जरूरत है 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>


183
2018-02-04 01:23





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

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

<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>

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


16
2018-02-04 21:14



अधिकतम चौड़ाई का उपयोग करना हालांकि काम करता है .... - Pacerier
यह काम करता है, लेकिन मैं हार गया vertical-align:middle और इसे डीआईवी में जोड़ने से समस्या ठीक नहीं होती है। - Michael


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

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

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


7
2018-02-04 01:22





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


5
2018-02-04 01:08





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

<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 में सेल सामग्री लपेटना।


3
2018-04-30 01:34



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


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

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

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

इस कदर:

<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>

3
2018-05-09 12:56





सर्वश्रेष्ठ समाधान शून्य चौड़ाई के साथ टेबल सेल में 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>

3
2018-01-23 16:51



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


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

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


2
2017-07-05 08:55