html - वर्ड-रैप ब्रेक-वर्ड इस उदाहरण में काम नहीं करता है




css (4)

मुझे इस उदाहरण के साथ काम करने के लिए वर्ड-रैप नहीं मिल सकता है ...

<html>
<head></head>
<body>

<table style="table-layout:fixed;">
<tr>
<td style="word-wrap: break-word; width:100px;">ThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrap</td>
</tr>
</table>

</body></html>

मुझे यह पढ़कर याद आया कि एक लेआउट को निर्दिष्ट करना था (जो मैंने किया था), लेकिन इसके अलावा मुझे यकीन नहीं है कि मुझे काम करने के लिए क्या करना होगा। मैं वास्तव में फ़ायरफ़ॉक्स में काम करना चाहूंगा। धन्यवाद।

EDIT: क्रोम 19 और फ़ायरफ़ॉक्स 12 में विफल, यह IE8 में काम करता है। मैंने सख्त और संक्रमणकालीन सिद्धांत की कोशिश की, न ही काम किया।


यह कोड भी काम कर रहा है:

<html>
<head></head>
<body>

<table style="table-layout:fixed;">
<tr>
<td style="word-break: break-all; width:100px;">ThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrapThisStringWillNotWrap</td>
</tr>
</table>

</body></html>


मोज़िला फ़ायरफ़ॉक्स समाधान

जोड़ें:

display: inline-block;

अपने td की शैली के लिए।

वेबकिट आधारित ब्राउज़र ( Google Chrome , Safari , ...) समाधान

जोड़ें:

display: inline-block;
word-break: break-word;

अपने td की शैली के लिए।

नोट: मन, अभी के लिए, break-word वेबकिट के लिए मानक विनिर्देश का हिस्सा नहीं है; इसलिए, आपको break-all को नियोजित करने में रुचि हो सकती है। यह वैकल्पिक मूल्य निस्संदेह कठोर समाधान प्रदान करता है; हालाँकि, यह मानक के अनुरूप है।

ओपेरा समाधान

जोड़ें:

display: inline-block;
word-break: break-word;

अपने td की शैली के लिए।

पिछला पैराग्राफ ओपेरा पर इसी तरह लागू होता है।


गुणों के इस संयोजन से मुझे मदद मिली:

display: inline-block;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: normal;
line-break: strict;
hyphens: none;
-webkit-hyphens: none;
-moz-hyphens: none;


विभिन्न ब्राउज़रों पर स्मार्ट ब्रेक (ब्रेक-वर्ड) अच्छी तरह से काम करने के लिए, मेरे लिए जो काम किया गया वह नियमों का निम्नलिखित सेट था:

#elm {
    word-break:break-word; /* webkit/blink browsers */
    word-wrap:break-word; /* ie */
}
-moz-document url-prefix() {/* catch ff */
    #elm {
        word-break: break-all; /* in ff-  with no break-word we'll settle for break-all */
    }
}




css