मैंने उपयोग किया है:
word-break:break-all;
table-layout:fixed;
और पाठ Chrome में नहीं बल्कि फ़ायरफ़ॉक्स में लपेटता है।
अपडेट: मैंने डिजाइन बदलने का फैसला किया, इसलिए इसे लपेटने की जरूरत नहीं थी; सीएसएस फिक्स / हैक को सुलझाने की कोशिश बहुत निराशाजनक और समय लेने वाली साबित हो रही थी।
जवाबों:
यह कोशिश करें, मुझे लगता है कि यह "AAAAAAAAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRRRRRGGJGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG]
AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G
मैंने Google पर कुछ अलग वेबसाइटों से अपना उदाहरण लिया है। मैंने इसका परीक्षण ff 5.0, IE 8.0 और Chrome 10 पर किया है।
.wrapword {
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -webkit-pre-wrap; /* Chrome & Safari */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
word-break: break-all;
white-space: normal;
}
<table style="table-layout:fixed; width:400px">
<tr>
<td class="wrapword">
</td>
</tr>
</table>
word-break: break-word;
CSS3 का उपयोग करें word-wrap: break-word;। WebKit आधारित ब्राउज़रों (सफारी, क्रोम) में भी काम करता है।
अद्यतन : मैं भूल गया, प्रश्न में तत्व या तो निहित होना चाहिए या स्पष्ट रूप से निश्चित तत्व के रूप में तैनात होना चाहिए या ब्लॉक तत्व के रूप में प्रदर्शित होना चाहिए। तालिका कोशिकाओं ( td) के लिए, का उपयोग करें display: inline-block;।
display: inline-block;।
यहाँ ओपी ने जो पूछा उसका उन्नत संस्करण है।
कभी-कभी, क्या होता है, हमारा ग्राहक हमें लाइन के अंत तक शब्द विराम के बाद '-' देना चाहता है।
पसंद
AAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBB
तोड़ना
AAAAAAAAAAAAAAAAAAAAAAA-
BBBBBBBBB
तो, नई सीएसएस संपत्ति है अगर समर्थित है, आमतौर पर नवीनतम ब्राउज़रों में समर्थित है।
.dont-break-out {
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
मैं इसका उपयोग कर रहा हूं।
मुझे उम्मीद है कि किसी ने इस तरह की मांग की होगी।
स्वचालित तालिका लेआउट के लिए संबंधित td को अधिकतम-चौड़ाई और वर्ड-रैप विशेषताओं को संयोजित करने की कोशिश करें।
उदाहरण के लिए: <td style="max-width:175px; word-wrap:break-word;"> ... </td>
फ़ायरफ़ॉक्स 32, क्रोम 37 और IE11 में परीक्षण किया गया।
max-width, और नहीं width। फिर भी मेरे लिए सबसे अच्छा समाधान है, क्योंकि यह शब्दों को मनमाने ढंग से नहीं तोड़ता है।
ब्रेक पॉइंट बनाने के लिए आप मैन्युअल रूप से शून्य चौड़ाई रिक्त स्थान (& # 8203;) इंजेक्ट कर सकते हैं।
<wbr>["शब्द विराम" के लिए]। इस और ​समाधान के लिए ब्राउज़र का समर्थन यहां दिया गया है : quirksmode.org/oddsandends/wbr.html
tdटैग के लिए एक कॉलम चौड़ाई सेट करें ।
मुझे लगता है कि यह फ़ायरफ़ॉक्स में एक लंबे समय तक चलने वाला मुद्दा है, जो मोज़िला और नेटस्केप को वापस करता है। मुझे यकीन है कि आप लंबे URL के प्रदर्शन के साथ समस्या कर रहे थे। मुझे लगता है कि यह कुछ बदसूरत हैक्स के बिना सीएसएस के साथ तय करने के बजाय रेंडरिंग इंजन के साथ एक मुद्दा है।
डिजाइन को बदलने के लिए समझ में आता है।
हालांकि यह आशातीत लग रहा था: http://hacks.mozilla.org/2009/06/06/word-wrap/
मैं अपनी परियोजना के लिए कोणीय का उपयोग कर रहा हूं, और एक साधारण फिल्टर के साथ इसे हल करने में कामयाब रहा:
टेम्पलेट:
<td>{{string | wordBreak}}</td>
फिल्टर:
app.filter('wordBreak', function() {
return function(string) {
return string.replace(/(.{1})/g, '$1');
}
})
आप इसे देख नहीं सकते, लेकिन बाद $1में एक अदृश्य स्थान (टिप के लिए धन्यवाद @kingjeffrey) है, जो टेबल कोशिकाओं के लिए शब्द विराम को सक्षम करता है।
ऐसा करने का एक छोटा सा तरीका है कि प्रत्येक अक्षर के बीच स्थान जोड़ने के लिए पाठ को संसाधित करना। रिक्त स्थान बदलें इसके बाद रिक्त स्थान को नीचे लाने के लिए पत्र-रिक्ति सीएसएस विशेषता का उपयोग करें।
मुझे पता है, यह एक हैक है ... लेकिन अगर कुछ और काम नहीं करता है, तो इसे समस्या के बिना लपेटना चाहिए।