/ / आप सामग्री को कैसे लपेटते हैं? - html, सीएसएस, वेब

आप सामग्री को कैसे लपेटते हैं? - html, सीएसएस, वेब

मेरे पास कुछ सामग्री है   और यह इसे सही ढंग से नहीं लपेटता है word-break: break-all हालाँकि यह शब्द को भी विभाजित करता है। मैं अनुमान लगा रहा हूं कि   एक पत्र की तरह व्यवहार किया जा रहा है? तो वहाँ एक तरीका है संभाल करने के लिए   एक पत्र से अलग है ताकि इसे तोड़ा जा सके लेकिन शब्दों को ऐसा नहीं कहा जा सकता है?

table{
table-layout: fixed;
border: 1pt solid;
}
.wrapme{
white-space: wrap;
word-wrap: break-word;
word-break: break-all;
}
<div class="wrapme">
<table>
<tbody>
<tr>
<td>
LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;
</td>
</tr>
</tbody>
</table>
</div>

कृपया यहां एक नज़र डालें https://jsfiddle.net/j6hpovbo/

के बीच अंतर &nbsp; तथा " " में समझाया गया है "" और "" में क्या अंतर है?

उत्तर:

जवाब के लिए 3 № 1

इसे रेंडर करने से पहले अपना डेटा ट्रांसफ़ॉर्म करें। एक बार जब आप इसे अपने बाहरी स्रोत से प्राप्त कर लेते हैं, तो इसे बदलने के लिए एक स्ट्रिंग प्रतिस्थापन करें &nbsp; एक वास्तविक स्थान के साथ। आप इस सर्वर-साइड या क्लाइंट-साइड कर सकते हैं। सर्वर-साइड शायद सबसे अच्छा है, लेकिन यहां एक मूल जावास्क्रिप्ट समाधान है:

var tds = document.querySelectorAll("td");
for (i = 0; i < tds.length; ++i) {
tds[i].innerHTML = tds[i].innerHTML.replace(/&nbsp;/g, " ");
}
<table><tr><td>LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;LoremIspum&nbsp;
</td></tr></table>


जवाब के लिए 0 № 2

इस jsfiddle की कोशिश करें: https://jsfiddle.net/j6hpovbo/2/

उस समाधान में स्टाइलिंग संपत्ति प्रदान करने की कोई आवश्यकता नहीं है .wrapme कक्षा। चौड़ाई लगाने से यह समस्या हल हो जाएगी।