बूटस्ट्रैप टेबल लंबे समय से अनदेखा पाठ

Question

मैं बूटस्ट्रैप का उपयोग कर रहा हूं और मेरे पास कुछ कॉलम के साथ एक टेबल है, जिसमें से आखिरी बार रिक्त स्थान के बिना टेक्स्ट का लंबा टुकड़ा होता है। मैंने देखा कि कुछ स्क्रीन आकारों के तहत, तालिका अपने मूल div को बहती है और अपनी भाई तालिका के साथ बदसूरत ओवरलैपिंग बनाती है।

मैंने इसके साथ खेला और मुझे लगता है कि समस्या को बिना किसी स्थान के टेक्स्ट के साथ करना है। मैंने jsfiddle बनाया जो दर्शाता है कि मेरा क्या मतलब है।

जैसा कि आप देख सकते हैं, शीर्ष बाएंतम तालिका अच्छी तरह से व्यवहार की जाती है और अधिक टेक्स्ट को समायोजित करने के लिए लंबवत रूप से बढ़ती है। हालांकि, निचले बाएं टेबल के कारण लंबे समय तक अनदेखा पाठ के कारण दाईं तरफ एक ओवरफ्लो होता है और निचले बाएं टेबल के दाएं कॉलम को अपने भाई के नीचे "हवा" के नीचे हवाएं होती हैं।

क्या किसी के पास कोई सुझाव है कि मैं इसे कैसे ठीक कर सकता हूं ताकि बहुत लंबा टेक्स्ट क्लिप हो या आंशिक रूप से एक नई लाइन पर विभाजित हो जाए?

Answer 1

अपने <table>

.the-table { 
    table-layout: fixed; 
    word-wrap: break-word; 
} 

के लिए निम्न शैलियों जोड़े के रूप में आप चाहते हैं तो फिर आप के माध्यम से-सीएसएस अपने लेआउट समायोजित कर सकते हैं।

Answer 2

इस तालिका लेआउट के लिए मजबूर कर के बिना काम करता ठीक की जाने वाली बस इसे td में जोड़ने के लिए या किसी

.is-breakable { 
    word-break: break-word; 
} 

Answer 3

आप सीएसएस नीचे का उपयोग कर सकते हैं। यह पाठ को लपेट देगा और पाठ के अंत में ... लागू होगा।

उदा। This_is_a_large_text This_is_a_lar में बदल जायेगा ...

td { 
    max-width: 120px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

आप संपूर्ण पाठ मान को दिखाने के लिए टूल टिप जोड़ सकते हैं।

<td data-toggle="tooltip" title="${text}">${text}</td> 

Answer 4

मुझे इंटरनेट एक्सप्लोरर में काम करने वाले इन समाधानों में समस्या हो रही थी।

मैंने अंततः काम करने के लिए निम्न शैली का उपयोग किया।

<td style="word-break: break-all">