CSS ellipsis टेबल सेल में काम क्यों नहीं करता है?

Question

निम्नलिखित उदाहरण पर विचार करें: ( लाइव डेमो यहां )

$(function() {
  console.log("width = " + $("td").width());
});

td {
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

आउटपुट है: width = 139और दीर्घवृत्त प्रकट नहीं होता है।

मुझे यहां क्या समझ नहीं आ रहा है?

Comments

तालिका सेल में CSS पाठ-अतिप्रवाह के

— BoltClock

किसी तरह डुप्लिकेट, लेकिन जवाब एक समाधान प्रदान नहीं करता है (जैसा कि अर्लेन कॉस करता है)।

— फ्लोरियन मार्गाइन

widthऔर heightटेबल की कोशिकाओं को हमेशा न्यूनतम चौड़ाई और ऊंचाई के रूप में उपयोग किया जाता है । टेबल सेल अलग हैं!

— श्री लिस्टर

@FlorianMargaine वास्तव में, दूसरा प्रश्न वर्कअराउंड प्रदान करता है: सेल में वांछित चौड़ाई के साथ एक div डालें।

— श्री लिस्टर

मैं अभी भी इस पृष्ठ पर सूचीबद्ध उत्तरों को पसंद करता हूं।

— फ्लोरियन मार्गाइन

Answer 1

जाहिरा तौर पर, जोड़ना:

td {
  display: block; /* or inline-block */
}

समस्या को हल करता है।

---

एक अन्य संभावित समाधान table-layout: fixed;तालिका के लिए सेट करना है, और इसे भी सेट करना है width। उदाहरण के लिए: http://jsfiddle.net/fd3Zx/5/

Comments

बिल्कुल सही। तत्व display: table-cell( तत्वों के लिए डिफ़ॉल्ट td) एक चौड़ाई को स्वीकार नहीं करते हैं।

— माइकल मिओर

display: block;तालिका का उपयोग करने के उद्देश्य को पराजित करता है। मुझे table-layout: fixed;विकल्प पसंद है , इसने मेरे लिए अच्छा काम किया।

— एलेक्स के

table-layout:fixedकम स्मार्ट तरीके से स्तंभों की चौड़ाई वितरित करता है। क्या एक और विकल्प है जो कॉलम की चौड़ाई को उसी तरह से असाइन करेगा table-layout: normalऔर अभी तक दीर्घवृत्त को सही ढंग से प्रदर्शित करेगा?

— घोंसला

टेबल बॉर्डर के साथ यह शिकंजा; अधिकतम-चौड़ाई का उपयोग नहीं करता है।

— चार्ली

Answer 2

इसे लगाना भी जरूरी है

table-layout:fixed;

युक्त तालिका पर, इसलिए यह IE9 में अच्छी तरह से संचालित होता है (यदि आपकी अधिकतम चौड़ाई का उपयोग करें)।

Comments

यह भी सुनिश्चित करेगा कि पाठ अतिप्रवाह उत्तरदायी लेआउट में काम करता है

— jao

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

— मैथ्यू_360

Answer 3

जैसा कि पहले कहा गया था, आप उपयोग कर सकते हैं td { display: block; }लेकिन यह तालिका का उपयोग करने के उद्देश्य को हरा देता है।

आप उपयोग कर सकते हैं table { table-layout: fixed; }लेकिन शायद आप यह चाहते हैं कि यह कुछ कॉलम्स के लिए अलग तरह से व्यवहार करे।

तो जो आप चाहते हैं उसे प्राप्त करने का सबसे अच्छा तरीका है कि आप अपने पाठ को इस तरह से लपेटें <div>और अपने CSS को इस तरह लागू करें <div>( <td>इस तरह नहीं ):

td {
  border: 1px solid black;
}
td > div {
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Comments

यह सबसे सरल तरीका है जिसे मैंने देखा है और यह वास्तव में IE8 में काम करता है।

— कीथ केटरर 19

यह वास्तव में तालिकाओं में दीर्घवृत्त पर मैंने देखा सबसे अच्छा समाधान है।

— membersound

Answer 4

max-widthइसके बजाय का उपयोग करने का प्रयास करें width, तालिका अभी भी स्वचालित रूप से चौड़ाई की गणना करेगी।

ie11(यानी 8 संगतता मोड के साथ) में भी काम करता है ।

td.max-width-50 {
  border: 1px solid black;
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<table>
  <tbody>
    <tr>
      <td class="max-width-50">Hello Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

jsfiddle ।

Comments

अच्छी तरह से देखा गया। संभवतः दोनों का उपयोग करना सबसे अच्छा है , ताकि तत्व एक निश्चित चौड़ाई हो। अन्यथा यह कम हो सकता है यदि सामग्री इसकी अनुमति देती है।

— एलसर्नी

डिस्प्ले हैक की तुलना में बेहतर तरीका; टेबल बॉर्डर के साथ डिस्प्लेहॉक स्क्रू।

— चार्ली

Answer 5

डेमो पेज

डायनामिक चौड़ाई वाली तालिकाओं के लिए, मुझे संतोषजनक परिणाम प्राप्त करने का निम्न तरीका मिला। <th>छंटनी-पाठ क्षमता की कामना करने वाले प्रत्येक के पास एक आंतरिक लपेटन तत्व होना चाहिए जो काम करने की <th>अनुमति की सामग्री को लपेटता है text-overflow।

वास्तविक चाल इकाइयों में max-width(पर <th>) सेट करना है ।vw

यह प्रभावी रूप से तत्व की चौड़ाई को व्यूपोर्ट चौड़ाई (ब्राउज़र विंडो) के लिए "बाध्य" होने का कारण बनेगा और इसके परिणामस्वरूप एक उत्तरदायी सामग्री क्लिपिंग होगी। vwआवश्यक मान के लिए इकाइयों को सेट करें ।

न्यूनतम सीएसएस:

th{ max-width:10vw; }
      
th > .wrap{ 
   text-overflow:ellipsis;
   overflow:hidden;
   white-space:nowrap;
}

---

यहाँ एक चलने योग्य डेमो है:

table {
  font: 18px Arial;
  width: 40%;
  margin: 1em auto;
  color: #333;
  border: 1px solid rgba(153, 153, 153, 0.4);
}

table td, table th {
  text-align: left;
  padding: 1.2em 20px;
  white-space: nowrap;
  border-left: 1px solid rgba(153, 153, 153, 0.4);
}

table td:first-child, table th:first-child {
  border-left: 0;
}

table th {
  border-bottom: 1px solid rgba(153, 153, 153, 0.4);
  font-weight: 400;
  text-transform: uppercase;
  max-width: 10vw;
}

table th > .wrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<table>
    <thead>
        <tr>
            <th>
                <div class="wrap" title="Some long title">Some long title</div>
            </th>
            <th>
                <div class="wrap">Short</div>
            </th>
            <th>
                <div class="wrap">medium one</div>
            </th>
            <th>
                <div class="wrap" title="endlessly super long title which no developer likes to see">endlessly super long title which no developer likes to see</div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>very long text here</td>
        </tr>
    </tbody>
</table>

Answer 6

बस एक विकल्प की पेशकश के रूप में मुझे यह समस्या थी और यहां अन्य किसी भी उत्तर का वांछित प्रभाव नहीं था जो मुझे चाहिए था। इसलिए इसके बजाय मैंने एक सूची का उपयोग किया। अब शब्दार्थ यह है कि मैं जो जानकारी दे रहा था, उसे सारणीबद्ध डेटा लेकिन सूचीबद्ध डेटा दोनों के रूप में माना जा सकता था।

तो अंत में मैंने क्या किया:

<ul>
    <li class="group">
        <span class="title">...</span>
        <span class="description">...</span>
        <span class="mp3-player">...</span>
        <span class="download">...</span>
        <span class="shortlist">...</span>
    </li>
    <!-- looped <li> -->
</ul>

तो मूल रूप से ulहै table, liहै tr, और spanहै td।

फिर सीएसएस में मैंने spanतत्वों को सेट किया display:block;और float:left;(मैं पसंद करता हूं कि संयोजन के inline-blockरूप में यह IE के पुराने संस्करणों में काम करेगा, फ्लोट प्रभाव को देखने के लिए: http://css-tricks.com/snippets/css/clear- फिक्स / ) और भी दीर्घवृत्त है:

span {
    display: block;
    float: left;
    width: 100%;

    // truncate when long
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

फिर आप जो कुछ भी करते हैं वह max-widthsआपके स्पैन का सेट होता है और वह सूची को एक टेबल का रूप देगा।

Comments

क्या आप td (उदा। <td><ul>...</ul></td>) के अंदर उल आवेदन कर सकते हैं ? यह मेरे लिए काम करने के लिए प्रतीत नहीं होता है :(

— सैम

Answer 7

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

<input disabled='disabled' style="border: 0; padding: 0; margin: 0" />

यह एक टेक्स्ट फ़ील्ड की तरह दिखता है, लेकिन अधिक उपयोगकर्ता के अनुकूल हाइलाइट-सक्षम है

Comments

यह उपयोगकर्ता के अनुकूल नहीं है क्योंकि सहायक टेक्नोलोजी के उपयोग से यह एक इनपुट के रूप में गलत तरीके से पढ़ा जाता है और इसलिए उपयोगकर्ता को लगता है कि वह कुछ इनपुट कर सकता है। तत्वों के शब्दार्थ का दुरुपयोग करना बिल्कुल ठीक नहीं है।

— कार्लो

OMG, यह बहुत चालाक है! चूंकि यह तालिका का हिस्सा है, इसलिए बस पारदर्शी पृष्ठभूमि के साथ इनपुट को सीमाहीन के रूप में सेट करें। मैं इस समाधान से प्यार करता हूँ!

— सैम

Answer 8

box-sizingअपने tdतत्वों की सीएसएस संपत्ति की जाँच करें । मुझे सीएसएस टेम्प्लेट में समस्या थी जो इसे border-boxमूल्य पर सेट करता है । आपको सेट की जरूरत है box-sizing: content-box।

Answer 9

अपनी टेबल को वैसे ही छोड़ दें जैसे वे हैं। बस टीडी के अंदर की सामग्री को एक स्पैन के साथ लपेटें जिसमें ट्रंकेशन सीएसएस लागू है।

/* CSS */
.truncate {
    width: 50px; /*your fixed width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block; /* this fixes your issue */
}

<!-- HTML -->
<table>
    <tbody>
        <tr>
            <td>
                <span class="truncate">
                    Table data to be truncated if it's too long.
                </span>
            </td>
        </tr>
    </tbody>
</table>

Comments

मैंने यह कोशिश की, यह DataTables.net पर काम नहीं करता है। कोई उपाय?

— सैम

Answer 10

यदि आप td ( इस उत्तर में ) की तरह अधिकतम-चौड़ाई सेट नहीं करना चाहते हैं , तो आप div को अधिकतम-चौड़ाई सेट कर सकते हैं:

function so_hack(){}

function so_hack(){} http://jsfiddle.net/fd3Zx/754/ function so_hack(){}

function so_hack(){}

नोट: 100% काम नहीं करता है, लेकिन 99% FF में ट्रिक करता है। अन्य आधुनिक ब्राउज़रों को मूर्खतापूर्ण div hacks की आवश्यकता नहीं है।

td {
  सीमा: 1px ठोस काला;
    padding-left: 5px;
    गद्दी-सही: 5px;
}
td> div {
    अधिकतम-चौड़ाई: 99%;
    छिपा हुआ सैलाब;
    पाठ-अतिप्रवाह: दीर्घवृत्त;
    श्वेत-स्थान: Nowrap;

}