मान लें कि मेरे पास यह टेक्स्ट है जिसे मैं एक HTML टेबल सेल में प्रदर्शित करना चाहता हूं:
Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies, Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K, Froot Loops, Apple Jacksऔर मैं चाहता हूं कि एक अल्पविराम के बाद लाइन अधिमानतः टूट जाए।
क्या एचटीएमएल रेंडरर को कुछ निर्दिष्ट स्थान पर तोड़ने की कोशिश करने के लिए कहने का एक तरीका है, और क्या ऐसा करने से पहले बिना रिक्त स्थान का उपयोग किए , रिक्त स्थान में से एक के बाद तोड़ने की कोशिश करना है ? यदि मैं गैर-ब्रेकिंग स्पेस का उपयोग करता हूं तो यह बिना शर्त के चौड़ाई को बड़ा बनाता है। मैं चाहता हूं कि किसी एक स्थान के बाद लाइन ब्रेक हो, अगर लाइन-रैपिंग एल्गोरिथ्म ने इसे पहले अल्पविराम के साथ आज़माया है और फिट होने के लिए लाइन नहीं मिल सकती है।
मैं <span>तत्वों में पाठ टुकड़े लपेटने की कोशिश की, लेकिन यह कुछ भी उपयोगी नहीं लगता है।
<html>
<head>
<style type="text/css">
div.box { width: 180px; }
table, table td {
border: 1px solid;
border-collapse: collapse;
}
</style>
</head>
<body>
<div class="box">
<table>
<tr>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<td>lorem ipsum</td>
<td>
<span>Honey Nut Cheerios,</span>
<span>Wheat Chex,</span>
<span>Grape-Nuts,</span>
<span>Rice Krispies,</span>
<span>Some random cereal with a very long name,</span>
<span>Honey Bunches of Oats,</span>
<span>Wheaties,</span>
<span>Special K,</span>
<span>Froot Loops,</span>
<span>Apple Jacks</span>
</td>
<td>lorem ipsum</td>
</tr>
</table>
</div>
</body>
</html>नोट: ऐसा लगता है कि CSS3 काtext-wrap: avoid व्यवहार वही है जो मैं चाहता हूं, लेकिन मुझे यह काम करने के लिए नहीं मिल सकता है।