पाठ को <td> टैग में लपेटें


136

मैं कुछ पाठ को एक <td>तत्व में जोड़ना चाहता हूं । मैंने कोशिश की है style="word-wrap: break-word;" width="15%"। लेकिन यह पाठ को लपेट नहीं रहा है। क्या इसे 100% चौड़ाई देना अनिवार्य है? मेरे पास अन्य नियंत्रण प्रदर्शित करने के लिए केवल 15% चौड़ाई उपलब्ध है।


1
HTML क्या आप उपयोग कर रहे हैं? क्या यह <td> कुछ पाठ है ... </ td> या आपके TD में <p> या <span> है? जब आप कहते हैं कि यह रैपिंग नहीं है तो मुझे लगता है कि आप टीडी को चौड़ाई में विस्तार देख रहे हैं जब पाठ तालिकाओं की चौड़ाई के "15%" से अधिक है?
स्क्रूलाइफ करें

मेरे HTML में <td> डायनामिक टेक्स्ट .. </ td> है और आप TD विस्तार के बारे में जो भी मानते हैं वह बिल्कुल सही है।

जवाबों:


221

टीडी पाठ लपेटने के लिए

पहले सेट टेबल स्टाइल

table{
    table-layout: fixed;
}

फिर टीडी स्टाइल सेट करें

td{
    word-wrap:break-word
}

5
मुझे लगता है कि यह acceped नहीं है क्योंकि यह क्रोम में काम नहीं करता है ... :-( webkit के लिए कोई समाधान?
MarcoS

4
क्रोम में मेरे लिए पूरी तरह से काम किया।
एलेजांद्रो रिडेल

17
दिलचस्प ... क्रोम में, मुझे white-space: normaltd स्टाइल में काम करने के लिए रैपिंग प्राप्त करने के लिए उपयोग करना था (इसके बजाय word-wrap:break-word)
जिम

3
मैं पुष्टि कर सकता हूं कि मुझे जिम के जवाब के साथ एक ही अनुभव था। किसी कारण से क्रोम white-space:normal;
जुआरोस

1
white-space: pre-wrapयदि आपको सफेद-स्थान को संरक्षित करने की आवश्यकता है, तो इसका उपयोग करें ।
ईक्शा

47

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


7
मैंने इस समाधान का प्रयास किया है, लेकिन लगता है कि यह क्रोम में काम नहीं कर रहा है। मेरे पास एक तालिका है जो एक हाइपरलिंक के साथ गतिशील रूप से भरी जा रही है जो सेल की चौड़ाई से दोगुनी है। 'टेबल-लेआउट: फिक्स्ड' टेबल स्ट्रेचिंग के साथ समस्या को हल करता है, लेकिन पाठ को लपेटता नहीं है; इसके बजाय यह पृष्ठ के दाईं ओर खिंचाव जारी है। क्या मैं कुछ भूल रहा हूँ?
VOIDHand

30

मेरा मानना ​​है कि आपने 22 तालिकाओं का सामना किया है। सारणी संरचना में सामग्री को लपेटने के लिए तालिकाओं के लिए महान हैं और वे उस सामग्री की जरूरतों को पूरा करने के लिए "स्ट्रेचिंग" का एक अद्भुत काम करते हैं।

डिफ़ॉल्ट रूप से तालिका सेल सामग्री को फिट करने के लिए खिंचाव करेंगे ... इस प्रकार आपका पाठ बस इसे व्यापक बनाता है।

कुछ उपाय है।

1.) आप टीडी पर अधिकतम-चौड़ाई सेट करने का प्रयास कर सकते हैं।

<td style="max-width:150px;">

2.) आप अपने पाठ को एक रैपिंग तत्व (उदाहरण के लिए एक स्पैन) में डालने की कोशिश कर सकते हैं और उस पर बाधा डाल सकते हैं।

<td><span style="max-width:150px;">Hello World...</span></td>

हालांकि यह जानिए कि IE के पुराने संस्करण न्यूनतम / अधिकतम-चौड़ाई का समर्थन नहीं करते हैं।

चूंकि IE मूल रूप से अधिकतम-चौड़ाई का समर्थन नहीं करता है, इसलिए यदि आप इसे बाध्य करना चाहते हैं तो आपको एक हैक जोड़ने की आवश्यकता होगी। हैक जोड़ने के कई तरीके हैं, यह सिर्फ एक है।

पेज लोड होने पर, केवल IE6 के लिए, टेबल की प्रदान की गई चौड़ाई (पिक्सेल में) प्राप्त करें और फिर उस का 15% प्राप्त करें और उस कॉलम में पहले TD की चौड़ाई के रूप में लागू करें (या यदि आपके पास हेडर हैं) फिर से, पिक्सेल में ।


मेरे पास दोनों तरह से हैं। लेकिन पाठ को लपेटने में सक्षम नहीं है। मैं

1
आह, IE6। इससे जटिलता बढ़ती है। मैं IE6 हैक के साथ अपने जवाब को संशोधित करूँगा।
स्क्यूलिफ

11

table-layout:fixedविस्तार सेल समस्या का समाधान करेगा, लेकिन एक नया निर्माण करेगा। IE डिफ़ॉल्ट रूप से अतिप्रवाह छिपाएगा, लेकिन मोज़िला इसे बॉक्स के बाहर प्रस्तुत करेगा।

उपयोग करने के लिए एक और समाधान होगा: overflow:hidden;width:?px

<table style="table-layout:fixed; width:100px">
 <tr>
   <td style="overflow:hidden; width:50px;">fearofthedarkihaveaconstantfearofadark</td>
   <td>
     test
   </td>
 </tr>
</table>


9

यह मेरे लिए कुछ सीएसएस फ्रेमवर्क (सामग्री डिजाइन लाइट [एमडीएल]) के साथ काम करता है।

table {
  table-layout: fixed;
  white-space: normal!important;
}

td {
  word-wrap: break-word;
}

8

इसका word-breakउपयोग बिना स्टाइल के किया जा सकता tableहैtable-layout: fixed

table {
  width: 140px;
  border: 1px solid #bbb
}

.tdbreak {
  word-break: break-all
}
<p>without word-break</p>
<table>
  <tr>
    <td>LOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
  </tr>
</table>

<p>with word-break</p>
<table>
  <tr>
    <td class="tdbreak">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
  </tr>
</table>


3

यह वास्तव में अच्छी तरह से काम करता है:

<td><div style = "width:80px; word-wrap: break-word"> your text </div></td> 

आप अपने सभी <divपाठों के लिए एक ही चौड़ाई का उपयोग कर सकते हैं , या अपने पाठ को तोड़ने के लिए प्रत्येक मामले में चौड़ाई को समायोजित कर सकते हैं।

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


1
आप के बजाय सीएसएस का उपयोग करने के लिए हो सकता है, लेकिन इनलाइन शैलियों को आमतौर पर आधुनिक HTML में टाला जाता है, खासकर यदि आप हर कॉपी किए गए div के लिए एक ही शैली को बार-बार दोहरा रहे हैं।
टैंकरस्मैश

3

मेरे tdसाथ मेरा कुछ था :

white-space: pre;

इसने मेरे लिए इसे हल किया:

white-space: pre-wrap;

2

सेल चौड़ाई को पाठ के सबसे लंबे शब्द के समान, बस सेल की चौड़ाई सेट करने के लिए 1px

अर्थात

td {
  width: 1px;
}

यह प्रायोगिक है और मुझे परीक्षण और त्रुटि करते हुए इस बारे में पता चला

लाइव फिडेल: http://jsfiddle.net/harshjv/5e2oLL8L/2/


1

यह संभव है कि यह काम कर सकता है, लेकिन यह भविष्य में कुछ बिंदु पर एक उपद्रव साबित हो सकता है (यदि तुरंत नहीं)।

<style> 
tbody td span {display: inline-block;
               width: 10em; /* this is the nuisance part, as you'll have to define a particular width, and I assume -without testing- that any percent widths would be relative to the containing `<td>`, not the `<tr>` or `<table>` */
               overflow: hidden; 
               white-space: nowrap; }

</style>

...

<table>

<thead>...</thead>
<tfoot>...</tfoot>

<tbody>

<tr>

<td><span title="some text">some text</span></td> <td><span title="some more text">some more text</span></td> <td><span title="yet more text">yet more text</span></td>

</tr>

</tbody>

</table>

इसके लिए तर्क यह spanहै कि, जैसा कि दूसरों द्वारा बताया गया है, <td>आम तौर पर सामग्री को समायोजित करने के लिए विस्तार करेगा, जबकि <span>दिया जा सकता है-और एक निर्धारित चौड़ाई रखने की उम्मीद की जा सकती है; करने overflow: hiddenका इरादा है, लेकिन हो सकता है कि छिपाना क्या अन्यथा <td>विस्तार का कारण होगा ।

मैं titleविज़ुअल सेल में मौजूद (या क्लिप्ड) पाठ को दिखाने के लिए स्पैन की संपत्ति का उपयोग करने की सलाह दूंगा, ताकि टेक्स्ट अभी भी उपलब्ध हो (और यदि आप इसे देखने के लिए लोगों की आवश्यकता नहीं चाहते / चाहते हैं, तो ऐसा क्यों है? पहली जगह में, मुझे लगता है ...)।

इसके अलावा, अगर आप td {...}td के लिए एक चौड़ाई को परिभाषित करते हैं (या संभावित अनुबंध का विस्तार करेंगे, लेकिन मुझे संदेह है) इसकी अंतर्निहित चौड़ाई को भरने के लिए (जैसा कि मुझे लगता है कि यह ऐसा प्रतीत होता है table-width/number-of-cells), एक निर्दिष्ट तालिका-चौड़ाई बनाने के लिए प्रतीत नहीं होता है एक ही मुद्दा।

नकारात्मक पक्ष प्रस्तुति के लिए उपयोग किया जाने वाला अतिरिक्त मार्कअप है।


1

वास्तव में टेबलों की रैपिंग स्वचालित रूप से तालिकाओं में होती है। परीक्षण के दौरान लोगों को जो दोष लगता है वह काल्पनिक रूप से "gggggggggggggggggggggggggggggggggggggggggggggggg" के रूप में एक लंबी स्ट्रिंग मानने का होता है और शिकायत करता है कि यह लपेटता नहीं है। व्यावहारिक रूप से अंग्रेजी में कोई शब्द नहीं है जो यह लंबा है और यहां तक ​​कि अगर है, तो एक बेहोश मौका है कि इसका उपयोग उसी के भीतर किया जाएगा <td>

"पूर्वनिर्धारित परिस्थितियों में प्रतिवाद अंधविश्वास है" जैसे वाक्यों के साथ परीक्षण का प्रयास करें।


यह सही है। समझ में नहीं आ रहा है कि लोग "व्हाइट-स्पेस: नोराप" का उपयोग करने का सुझाव दे रहे हैं क्योंकि ओपी जो चाहता है वह ठीक उसके विपरीत होगा।
18-28 को

29
सही नहीं है अंग्रेजी में कोई शब्द जो यह लंबा है, लेकिन मान लीजिए कि मैं एक फ़ाइलपथ प्रदर्शित कर रहा हूं, जो निरंतर और बहुत लंबा होने वाला है।
krisp

2
..या उदाहरण के लिए संख्याओं की एक लंबी अल्पविराम से अलग की गई सूची जो दुर्भाग्य से कोई स्थान नहीं है।
आदित्य संघी

4
.. या एक लंबे domainname जो 63 वर्ण (विस्तार और www को छोड़कर) तक जा सकता है http://www.abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijk.com/
Brainfeeder

मैं इस समस्या को हल करने की कोशिश कर रहा हूं जब "शब्द" एक बहुत लंबा यूआरएल है। उदाहरण के साथ उपरोक्त टिप्पणी "ggggggggggggggggggggggggggggggggg"। लंबी उरोजों को ध्यान में नहीं रखा जा रहा है।
geekandglitter 20

0

अपने टीडीएस पर कक्षाएं लागू करें, उपयुक्त चौड़ाई लागू करें (याद रखें कि उनमें से एक को चौड़ाई के बिना छोड़ दें ताकि यह चौड़ाई के शेष को मान ले), फिर उपयुक्त शैलियों को लागू करें। एक संपादक में नीचे दिए गए कोड को कॉपी और पेस्ट करें और इसे देखने के लिए ब्राउज़र में देखें।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
td { vertical-align: top; }
.leftcolumn { background: #CCC; width: 20%; padding: 10px; }
.centercolumn { background: #999; padding: 10px; width: 15%; }
.rightcolumn { background: #666; padding: 10px; }
-->
</style>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="leftcolumn">This is the left column. It is set to 20% width.</td>
    <td class="centercolumn">
        <p>Hi,</p>
        <p>I want to wrap a text that is added to the TD. I have tried with style="word-wrap: break-word;" width="15%". But the wrap is not happening. Is it mandatory to give 100% width ? But I have got other controls to display so only 15% width available.</p>
        <p>Need help.</p>
        <p>TIA.</p>
    </td>
    <td class="rightcolumn">This is the right column, it has no width so it assumes the remainder from the 15% and 20% assumed by the others. By default, if a width is applied and no white-space declarations are made, your text will automatically wrap.</td>
  </tr>
</table>
</body>
</html>

मेरा मानना ​​है कि ओपी, जबकि स्पष्ट रूप से ऐसा नहीं कह रहा है, गैर-रिक्त स्थान गतिशील सामग्री को लपेटने के साथ समस्या है। इस स्थिति में, उपरोक्त समाधान काम नहीं करेगा - jsfiddle.net/qZrFW
user66001

-1
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Poem</th>
    <th>Poem</th>
  </tr>
  <tr>
    <td nowrap>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
    <td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
  </tr>
</table>

<p>The nowrap attribute is not supported in HTML5. Use CSS instead.</p>

</body>
</html>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.