टेबल सेल में मल्टीलाइन टेक्स्ट कैसे दिखाते हैं

119

मैं डेटाबेस से एक तालिका सेल में एक पैराग्राफ दिखाना चाहता हूं।

परिणाम एक बड़ी 1 पंक्ति है, जिसकी अनदेखी डेटाबेस में कैसे की जाती है। उदाहरण के लिए 'प्रवेशकों' की अनदेखी (नई लाइनें)

मैं इसे डेटाबेस में कैसे लिखा जाता है, उसी के अनुसार दिखाना चाहता हूं।

उदाहरण के लिए यदि पैराग्राफ को इस तरह बचाया जाता है:

hello ,
my name is x.

मैं चाहता हूं कि इसके बजाय इसे बिल्कुल वैसा ही दिखाया जाए:

hello, myname is x.

html css tablerow

— छायादार
स्रोत

164

आप white-space:preउपयुक्त पर लागू सीएसएस का उपयोग करना चाहते हैं <td>। उदाहरण के लिए, सभी तालिका कोशिकाओं के लिए ऐसा करने के लिए:

td { white-space:pre }

वैकल्पिक रूप से, यदि आप अपना मार्कअप बदल सकते हैं, तो आप <pre>अपनी सामग्री के चारों ओर एक टैग का उपयोग कर सकते हैं । डिफ़ॉल्ट वेब ब्राउज़र द्वारा white-space:preइस तत्व पर समान नियम लागू करने के लिए अपने उपयोगकर्ता-एजेंट स्टाइलशीट का उपयोग करते हैं ।

PRE तत्व दृश्य उपयोगकर्ता एजेंटों को बताता है कि संलग्न पाठ "पूर्वनिर्मित" है। विकृत टेक्स्ट को हैंडल करते समय, विजुअल यूजर एजेंट:

सफेद जगह छोड़ सकते हैं।

निश्चित पिच फ़ॉन्ट के साथ पाठ प्रस्तुत कर सकते हैं।

स्वचालित वर्ड रैप को अक्षम कर सकते हैं।

द्विदिश प्रसंस्करण को अक्षम नहीं करना चाहिए।

— Phrogz
स्रोत

अंगूठे, white-spaceसीएसएस 2.1 संपत्ति है जो व्यापक रूप से समर्थित है। IE8 पर परीक्षण, महान काम करता है।

— लेसी

मैं अब ऐसी स्थिति में हूं जहां टैग white-space: pre;में आवेदन करने पर ध्यान नहीं दिया जा रहा है <td>। <pre></pre>हमारी सामग्री को लपेटने के लिए उपयोग करना ठीक काम करता है, लेकिन इस तालिका के उपयोग (निर्यात करने के लिए), बड़े # कॉलम और पंक्तियाँ निर्यात की गई फ़ाइल के आकार को गुब्बारा करती हैं और फ़ाइल को पढ़ने पर क्रैश होने का कारण बनती हैं। (विषम, मुझे पता है)। किसी और को यह देखा है या एक समाधान के लिए एक विचार है?

— जोबोराहॉस

1

यह समाधान परिपूर्ण होने से बहुत दूर है। यह परिणाम देता है कि Excel उन कोशिकाओं के लिए उत्परिवर्ती लाइनों का उत्पादन करता है जिनके पास लाइनब्रेक हैं। एकमात्र सही उत्तर यहां पाया जा सकता है: bennadel.com/blog/…

— Elmue

55

style="white-space:pre-wrap; word-wrap:break-word"

यह नई लाइन के मुद्दे को हल करेगा। पूर्व टैग आवश्यकता से अधिक CSS जोड़ देगा।

— जजीकांत पाइदिमरला
स्रोत

1

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

— चालन

मुझे एक समस्या थी जिसमें मेरे डेटा में नई लाइन है। अन्य समाधान जैसे कि टेक्स्ट को <br/> या <div> या <pre> के साथ बदलना केवल पाठ के रूप में माना जा रहा था। यह समाधान उस समस्या पर पूरी तरह से काम करता है।

— अंशुमान गोयल

बहुत खुबस!! यह मेरे लिए बहुत अच्छा काम करता है। मेरे पास एक JDataTable था जो म्यूटेंट पाठ को सूचीबद्ध करता था और मुझे पाठ को ठीक से लपेटने के लिए आपको सीएसएस की आवश्यकता थी! दिन सेवर धन्यवाद बहुत!

— पाटसनलाइनर

1

यह मेरे लिए लाइन ब्रेक को संरक्षित करने के संदर्भ में काम करता है, लेकिन हर सेल के शीर्ष पर एक लाइन ब्रेक जोड़ता है ... कोई समाधान?

— jtr13

30

सामग्री को एक <pre>(पूर्व-स्वरूपित पाठ) टैग में लपेटें

<pre>hello ,
my name is x.</pre>

— जायसी बाबू
स्रोत

3

हालाँकि, यह मोनोस्पेस के साथ फ़ॉन्ट को अधिलेखित करता है।

— 18'18

23

इस समस्या को हल करने के लिए दो सुझाव:

समाधान 1: <div style="white-space:pre;">{database text}</div>या<pre>{database text}</pre>

यह अच्छा समाधान है यदि आपके पाठ में कोई html टैग या सीएसएस गुण नहीं हैं। उदाहरण के लिए टैब को बनाए रखने की अनुमति देता है।

समाधान 2: के \nसाथ बदलें<p></p> or <br/>

यह एक समाधान है यदि आप अन्य पाठ गुणों या स्वरूपण को खोए बिना, ब्रेक-रेखाओं को जोड़ना चाहते हैं। Php में एक उदाहरण होगा$text = str_replace("\n","<br />",$database_text);

आप इसका उपयोग कर सकते हैं <p></p>या कर सकते हैं <div></div>, लेकिन इसके लिए कुछ और पाठ पार्सिंग की आवश्यकता है।

— डैनियल विला बोआ
स्रोत

7

अपने सर्वर-साइड कोड पर, नई लाइनों ( \n) के साथ बदलें <br/>।

यदि आप PHP का उपयोग कर रहे हैं, तो आप उपयोग कर सकते हैं nl2br()

— रॉकेट हज़मत
स्रोत

6

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

मैंने पाया कि br टैग ने मेरे लिए अच्छा काम किया। उदाहरण के लिए:

<!DOCTYPE html>
<HTML>
    <HEAD>
        <TITLE></TITLE>
    </HEAD>
    <BODY>
  <TABLE>
            <TR>
                <TD>
                    item 1 <BR>
                    item 2 <BR>
                    item 3 <BR>
                    item 4 <BR>
                </TD>
            </TR>
        </TABLE>
  </BODY>

यह उस आउटपुट का उत्पादन करेगा जो मुझे चाहिए था।

— chumbaloo
स्रोत

5

मैं प्रत्येक लाइन के बाद html कोड टैग का उपयोग करता हूं (नीचे देखें) और यह मेरे लिए काम करता है।

George Benson </br> 123 Main Street </br> New York, Ny 12344 </br>

— रेने
स्रोत

2

यह एक टिप्पणी होना चाहिए एक जवाब नहीं।

— दीप शर्मा

<br> टेबल शब्दार्थ को तोड़ता है। पाठ-आधारित ब्राउज़र का उपयोग करके तालिका को देखने पर, नई पंक्तियों को तालिका पंक्तियों की तरह दिखाया जाता है।

— JAT86

3

नीचे दिए गए कोड मेरे लिए जादू की तरह काम करते हैं >>

td { white-space:pre-line }

— सुमन बप्पी
स्रोत

1

मैंने केवल <br>अंदर जोड़ा <td>और यह अच्छा काम करता है, लाइन तोड़ो!

— जेड vi
स्रोत

0

यदि आपके पास \nइसके साथ एक स्ट्रिंग चर है, जिसे आप अंदर रखना चाहते हैं td, तो आप कोशिश कर सकते हैं

<td>
    {value
        .split('\n')
        .map((s, index) => (
            <React.Fragment key={index}>
                {s}
                <br />
            </React.Fragment>
        ))}
</td>

— यूजीन इहनात्सेयू
स्रोत