मेरे तलाक को तोड़ने से लंबे शब्दों को कैसे रोकें?

148

जब से टेबल-लेआउट से डीआईवी-लेआउट पर स्विच किया गया, तब से एक आम समस्या बनी हुई है:

समस्या : आप अपने DIV को डायनामिक टेक्स्ट से भरते हैं और अनिवार्य रूप से एक सुपर-लॉन्ग शब्द होता है जो आपके div कॉलम के किनारे पर फैला होता है और आपकी साइट को अनप्रोफेशनल बनाता है।

RETRO-WHINING : टेबल लेआउट के साथ ऐसा कभी नहीं हुआ। एक टेबल सेल हमेशा सबसे लंबे समय तक शब्द की चौड़ाई का विस्तार करेगा।

गंभीरता : मैं इस समस्या को यहां तक कि सबसे प्रमुख साइटों पर देखता हूं, विशेष रूप से जर्मन साइटों पर जहां "गति सीमा" जैसे सामान्य शब्द भी बहुत लंबे हैं ("गेसचविंडगिट्सब्रीगेन्ज")।

क्या किसी के पास इसका कोई हल है?

css layout html

— एडवर्ड तुंगाय
स्रोत

4

आप उन सुपर-स्ट्रेच और प्रभावी रूप से टूटी हुई टेबल लेआउट को भूल गए होंगे। मैं अतिप्रवाह करूँगा: किसी भी दिन अनियंत्रित रूप से फैलने वाली कोशिकाओं पर छिपा हुआ।

— कोर्नेल

1

एक टेबल सेल हमेशा अच्छी तरह से ???????? सबसे लंबा शब्द की चौड़ाई का विस्तार

— बावजूद

1

मैं बहुत से लोगों को जानता हूं (और शायद मैं उनके बीच खुद को गिनूंगा) जो यह कहेंगे कि यह बहुत बुरा व्यवहार है। पृष्ठ और तत्व की चौड़ाई आमतौर पर कुछ ऐसा है जिस पर बहुत समय खर्च होता है। यदि आपके पास यादृच्छिक शब्द हैं जो चौड़ाई को बेकाबू बना रहे हैं, तो आप अपने डिजाइन के साथ विफल हो गए हैं।

— ओली

13

मुझे हमेशा लगता है कि टेबल व्यवहार HTML के लचीलेपन के मूल दर्शन के अनुरूप था। DIV / CSS कठोर स्तंभ चौड़ाई दर्शन पत्रिका डिजाइनरों से आता है जो अपने स्तंभों के साथ कभी-कभी व्यापक कभी संकीर्ण होने का सामना नहीं कर सकते।

— एडवर्ड तुंगाय

1

एक अच्छा डिजाइन सुसंगत होना चाहिए; यदि पृष्ठ सामग्री UI के आयामों को बदलने में सक्षम है तो यह डिज़ाइन का उल्लंघन करेगा। सच में, आप एक खिंचाव वाले लेआउट के साथ रेखा कहाँ खींचेंगे? Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch?

— डॉक्टर जोन्स

138

मुलायम हाइफ़न

आप सॉफ्ट हाइफ़न ( ) डालकर लंबे शब्दों को विभाजित करने के लिए ब्राउज़र बता सकते हैं :

averyvery&shy;longword

के रूप में प्रस्तुत किया जा सकता है

averyverylongword

या

averyvery-
लॉन्गवर्ड

एक अच्छी नियमित अभिव्यक्ति यह सुनिश्चित कर सकती है कि आप उन्हें तब तक नहीं डालेंगे जब तक कि परिचारिका:

/([^\s-]{5})([^\s-]{5})/ → $1&shy;$2

पाठ की खोज करते समय इस चरित्र को अनदेखा करने के लिए ब्राउज़र और खोज इंजन काफी स्मार्ट हैं, और क्रोम और फ़ायरफ़ॉक्स (दूसरों का परीक्षण नहीं किया गया है) पाठ को क्लिपबोर्ड पर कॉपी करते समय इसे अनदेखा करते हैं।

`` तत्त्व

एक और विकल्प इंजेक्ट करना है , एक पूर्व IE-ism , जो अब HTML5 में है :

averyvery<wbr>longword

बिना हाइफ़न के ब्रेक:

averyvery
longword

आप शून्य-चौड़ाई वाले अंतरिक्ष वर्ण (या &#x200B) के साथ इसे प्राप्त कर सकते हैं ।

FYI करें CSShyphens: auto नवीनतम IE, फ़ायरफ़ॉक्स और सफारी ( लेकिन वर्तमान में क्रोम नहीं ) द्वारा समर्थित है :

div.breaking {
  hyphens: auto;
}

हालाँकि यह हाइफ़नेशन हाइफ़नेशन डिक्शनरी पर आधारित है और यह लंबे शब्दों को तोड़ने की गारंटी नहीं है। हालांकि यह उचित पाठ को सुंदर बना सकता है।

रेट्रो-व्हिंगिंग समाधान

<table>लेआउट के लिए बुरा है, लेकिन display:tableअन्य तत्वों पर ठीक है। यह पुराने स्कूल के तालिकाओं की तरह ही विचित्र (और खिंचाव वाला) होगा:

div.breaking {
   display: table-cell;
}

overflowऔर white-space: pre-wrapनीचे दिए गए उत्तर भी अच्छे हैं।

— कोर्नेल
स्रोत

7

ठंडा! विकिपीडिया के अनुसार, आप & # 8203 के साथ शून्य-चौड़ाई वाला स्थान प्राप्त कर सकते हैं; - जब से आप इसे लाए हैं, क्या आप इसके लिए कम-बदसूरत भागने का कोड जानते हैं? मैं 8203 को याद करूंगा, अगर मुझे करना है, लेकिन ...

— ओजक

1

@ योजना - यह इस बात पर निर्भर करता है कि आप क्या सोचते हैं और # x200B; "कम बदसूरत" है या नहीं। :-) AFAIK, शून्य-चौड़ाई वाले स्थान के लिए कोई "शब्द इकाई" नहीं है।

— बेन ब्लैंक

1

यह अच्छा है, लेकिन प्रारंभिक समस्या का हल नहीं है।

— एल्बस डंबलडोर

25

इससे कॉपी / पेस्ट टूट जाता है।

— नागरगन

4

सिर्फ FYI करें, आप का भी उपयोग कर सकते हैं। Quirksmode.org/oddsandends/wbr.html देखें ।

— HaxElit

40

दो सुधार:

overflow:scroll - यह सुनिश्चित करता है कि आपकी सामग्री को डिज़ाइन की कीमत पर देखा जा सकता है (स्क्रॉलबार बदसूरत हैं)
overflow:hidden- बस किसी भी अतिप्रवाह से कटौती। इसका मतलब है कि लोग सामग्री को नहीं पढ़ सकते हैं।

यदि (एसओ उदाहरण में) आप इसे पैडिंग ओवरलैपिंग को रोकना चाहते हैं, तो आपको अपनी सामग्री रखने के लिए, पेडिंग के अंदर एक और div बनाना होगा।

संपादित करें: अन्य उत्तरों की स्थिति के अनुसार, शब्दों को काट-छाँट करने के लिए कई प्रकार के तरीके हैं, हो सकता है कि क्लाइंट साइड पर रेंडर चौड़ाई का काम करना (कभी भी इस सर्वर-साइड को करने का प्रयास न करें क्योंकि यह मज़बूती से कभी काम नहीं करेगा, प्लेटफ़ॉर्म के माध्यम से) जेएस और ब्रेक-वर्णों को सम्मिलित करना, या गैर-मानक और / या बेतहाशा असंगत सीएसएस टैग का उपयोग करना ( word-wrap: break-word फ़ायरफ़ॉक्स में काम नहीं करता है )।

हालांकि आपको हमेशा एक अतिप्रवाह वर्णनकर्ता की आवश्यकता होगी। यदि आपकी div में सामग्री का एक और बहुत चौड़ा ब्लॉक-प्रकार टुकड़ा (छवि, तालिका, आदि) है, तो आपको लेआउट / डिज़ाइन को नष्ट नहीं करने के लिए अतिप्रवाह की आवश्यकता होगी।

तो हर तरह से एक अन्य विधि (या उनमें से एक संयोजन) का उपयोग करें, लेकिन ओवरफ्लो को जोड़ना याद रखें ताकि आप सभी ब्राउज़रों को कवर कर सकें।

2 संपादित करें (नीचे अपनी टिप्पणी को संबोधित करने के लिए):

CSS overflowप्रॉपर्टी का उपयोग करना शुरू करना सही नहीं है, लेकिन यह डिजाइन को तोड़ना बंद कर देता है। overflow:hiddenपहले आवेदन करें । याद रखें कि अतिप्रवाह पैडिंग पर टूट नहीं सकता इसलिए या तो घोंसला बनायें divया बॉर्डर का उपयोग करें (जो भी आपके लिए सबसे अच्छा काम करता है)।

यह अतिप्रवाह सामग्री को छिपाएगा और इसलिए आप अर्थ खो सकते हैं। आप एक स्क्रॉलबार (उपयोग overflow:autoया overflow:scrollइसके बजाय overflow:hidden) का उपयोग कर सकते हैं, लेकिन div के आयाम और आपके डिज़ाइन के आधार पर, यह बहुत अच्छा नहीं लग सकता है या काम नहीं कर सकता है।

इसे ठीक करने के लिए, हम जेएस का उपयोग चीजों को वापस खींचने के लिए कर सकते हैं और स्वचालित ट्रंकेशन के कुछ रूप कर सकते हैं। मैं आपके लिए कुछ छद्म कोड लिखने के माध्यम से आधा था, लेकिन यह आधे रास्ते के माध्यम से गंभीरता से जटिल हो जाता है। यदि आपको अधिक से अधिक दिखाने की आवश्यकता है, तो हाइफ़नेटर को एक नज़र डालें ( जैसा कि नीचे उल्लेख किया गया है )।

बस ध्यान रखें कि यह उपयोगकर्ता के सीपीयू की कीमत पर आता है। इसके परिणामस्वरूप पृष्ठों को लोड होने और / या आकार बदलने में लंबा समय लग सकता है।

— ओली
स्रोत

1

पाठ-अतिप्रवाह के साथ: दीर्घवृत्त; पाठ अच्छी तरह से काटा जा सकता है।

— कोर्नेल

1

पाठ-अतिप्रवाह: दीर्घवृत्त IE-only (और विस्तार, गैर-मानक) है।

— ओली

overflow: scroll;यदि सामग्री में उपयोगी जानकारी हो तो मैं हमेशा जाना चाहूंगा । और फिर अगला लक्ष्य ऐसे सीएसएस बनाने की कोशिश करना है जो स्क्रॉल बार दिखाई नहीं देंगे। और अगर वे ऐसा करते हैं, तो आपके पास हमेशा बैकअप के रूप में स्क्रॉल बार होते हैं।

— यति

text-overflow: ellipsis stackoverflow.com/a/22811590/759452

— Adrien Be

33

यह एक जटिल मुद्दा है, जैसा कि हम जानते हैं, और ब्राउज़रों के बीच किसी भी सामान्य तरीके से समर्थित नहीं है। अधिकांश ब्राउज़र मूल रूप से इस सुविधा का समर्थन नहीं करते हैं।

HTML ईमेल के साथ किए गए कुछ कामों में, जहां उपयोगकर्ता सामग्री का उपयोग किया जा रहा था, लेकिन स्क्रिप्ट उपलब्ध नहीं है (और यहां तक कि सीएसएस बहुत अच्छी तरह से समर्थित नहीं है) सीएसएस के निम्न बिट आपके अनस्पेस्ड कंटेंट ब्लॉक के आसपास कम से कम कुछ हद तक मदद करनी चाहिए:

.word-break {
  /* The following styles prevent unbroken strings from breaking the layout */
  width: 300px; /* set to whatever width you need */
  overflow: auto;
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -hp-pre-wrap; /* HP printers */
  white-space: -o-pre-wrap; /* Opera 7 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
  -moz-binding: url('xbl.xml#wordwrap'); /* Firefox (using XBL) */
}

मोज़िला-आधारित ब्राउज़रों के मामले में, ऊपर उल्लिखित XBL फ़ाइल में निम्न शामिल हैं:

<?xml version="1.0" encoding="utf-8"?>
<bindings xmlns="http://www.mozilla.org/xbl" 
          xmlns:html="http://www.w3.org/1999/xhtml">
  <!--
  More information on XBL:
  http://developer.mozilla.org/en/docs/XBL:XBL_1.0_Reference

  Example of implementing the CSS 'word-wrap' feature:
  http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
  -->
  <binding id="wordwrap" applyauthorstyles="false">
    <implementation>
      <constructor>
        //<![CDATA[
        var elem = this;

        doWrap();
        elem.addEventListener('overflow', doWrap, false);

        function doWrap() {
          var walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false);
          while (walker.nextNode()) {
            var node = walker.currentNode;
            node.nodeValue = node.nodeValue.split('').join(String.fromCharCode('8203'));
          }
        }
        //]]>
      </constructor>
    </implementation>
  </binding>
</bindings>

दुर्भाग्य से, ओपेरा 8+ उपरोक्त किसी भी समाधान को पसंद नहीं करता है, इसलिए जावास्क्रिप्ट को उन ब्राउज़रों के लिए समाधान करना होगा (जैसे किilla / फ़ायरफ़ॉक्स।) एक और क्रॉस-ब्राउज़र समाधान (जावास्क्रिप्ट) जिसमें ओपेरा के बाद के संस्करण शामिल हैं। यहां पाई जाने वाली हेडर वांग की स्क्रिप्ट का उपयोग करना होगा: http://www.hedgerwow.com/360/dhtml/css-word-break.html

अन्य उपयोगी लिंक / विचार:

असंगत बाबले »ब्लॉग आर्काइव» मोज़िला / फ़ायरफ़ॉक्स के लिए सीएसएस वर्ड-रैप का अनुकरण करना
http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/

[OU] ओपेरा में कोई शब्द नहीं लपेटता है, IE में ठीक दिखाता है।
http://list.opera.com/pipermail/opera-users/2004-Nvent/024467.html
http://list.opera.com/pipermail/opera- उपयोगकर्ताओं / 2004 से नवंबर / 024468.html

— नील मुनरो
स्रोत

क्या होगा यदि मुझे आवश्यकता है चौड़ाई: 100%? इसका मतलब बाहर के कंटेनर का 100% है। इसका उद्देश्य पृष्ठ पर दिखाई देने और बाकी लेआउट को गड़बड़ाने से क्षैतिज स्क्रॉल सलाखों से बचना है।

— पिलावदज़िस

1

फ़ायरफ़ॉक्स के नए संस्करण अब word-wrap: break-word;CSS संपत्ति का समर्थन करते हैं, इसलिए यदि आपको पूर्व संस्करणों के लिए फ़ायरफ़ॉक्स में समर्थन की आवश्यकता नहीं है, तो आप XBL को समाप्त कर सकते हैं।

— नील मुनरो

27

सीएसएस क्रॉस ब्राउज़र वर्ड रैप

.word_wrap
{
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

— Remo
स्रोत

ओपेरा 9.24 में समर्थित नहीं

— SCC

14

शैली का उपयोग करें word-break:break-all;। मुझे पता है कि यह टेबल पर काम करता है।

— sanimalp
स्रोत

@sanimalp ओपेरा में समर्थित नहीं है 9.24

— SCC

13

क्या आप इसका मतलब यह है कि यह समर्थन करने वाले ब्राउज़रों में word-wrap: break-wordकाम नहीं करता है?

यदि स्टाइलशीट की बॉडी परिभाषा में शामिल है , तो इसे पूरे दस्तावेज़ में काम करना चाहिए।

यदि अतिप्रवाह एक अच्छा समाधान नहीं है, तो केवल एक कस्टम जावास्क्रिप्ट कृत्रिम रूप से लंबे शब्द को तोड़ सकता है।

नोट: यह वर्ड ब्रेक टैग भी है । यह ब्राउज़र को एक स्पॉट देता है जहां वह लाइन को विभाजित कर सकता है। दुर्भाग्य से, टैग सभी ब्राउज़रों में काम नहीं करता है, केवल फ़ायरफ़ॉक्स और इंटरनेट एक्सप्लोरर (और सीएसएस ट्रिक के साथ ओपेरा)।

— VonC
स्रोत

9

बस आईई 7, फ़ायरफ़ॉक्स 3.6.8 मैक, फ़ायरफ़ॉक्स 3.6.8 विंडोज और सफारी की जाँच की:

word-wrap: break-word;

एक सेट चौड़ाई के साथ एक div के अंदर लंबे लिंक के लिए काम करता है और सीएसएस में कोई अतिप्रवाह घोषित नहीं किया जाता है:

#consumeralerts_leftcol{
    float:left;
    width: 250px;
    margin-bottom:10px;
    word-wrap: break-word;
}

मुझे कोई असंगतता नहीं दिख रही है

— Zac Imboden
स्रोत

6

मुझे इस प्रश्न से केवल हाइफ़नेटर के बारे में पता चला । यह समस्या हल हो सकती है।

— dylanfm
स्रोत

इसने बनाया कैसे HowWouldYourSiteDealWithCommentsLikeThisOne अच्छा और प्रबंधनीय दिखता है। बहुत ही शांत।

— ओजार्क

6

बहुत लड़ाई के बाद, यह मेरे लिए काम किया है:

.pre {
    font-weight: 500;
    font-family: Courier New, monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

क्रोम, फ़ायरफ़ॉक्स और ओपेरा के नवीनतम संस्करणों में काम करता है।

ध्यान दें कि मैंने जिन white-spaceगुणों का सुझाव दिया है उनमें से कई को बाहर कर दिया - जो वास्तव में preमेरे लिए इंडेंटेशन को तोड़ दिया ।

— mpen
स्रोत

5

मेरे लिए निश्चित आकार के बिना एक div पर और गतिशील सामग्री के साथ इसका उपयोग करके काम किया:

display:table;
word-break:break-all;

— याकूब
स्रोत

4

इस टिप्पणी में regex को फिर से लिखें , यह अच्छा है, लेकिन यह शर्मीली हाइफ़न को केवल 5 गैर-व्हाट्सएप-या-हाइफ़न वर्णों के समूहों के बीच जोड़ता है। यह अंतिम समूह की अपेक्षा से अधिक लंबा हो सकता है, क्योंकि इसके बाद कोई मिलान समूह नहीं है।

उदाहरण के लिए, यह:

'abcde12345678901234'.replace(/([^\s-]{5})([^\s-]{5})/g, '$1&shy;$2')

... इस में परिणाम:

abcde&shy;12345678901234

यहाँ उस समस्या से बचने के लिए सकारात्मक रूप का उपयोग करते हुए एक संस्करण है:

.replace(/([^\s-]{5})(?=[^\s-])/g, '$1&shy;')

... इस परिणाम के साथ:

abcde&shy;12345&shy;67890&shy;1234

— enigment
स्रोत

4

इस समस्या के लिए मैं आमतौर पर जिस समाधान का उपयोग करता हूं, वह IE और अन्य ब्राउज़रों के लिए 2 अलग-अलग सीएसएस नियम सेट करना है:

word-wrap: break-word;

IE में woks एकदम सही, लेकिन शब्द-लपेट एक मानक CSS संपत्ति नहीं है। यह एक Microsoft विशिष्ट गुण है और फ़ायरफ़ॉक्स में काम नहीं करता है।

फ़ायरफ़ॉक्स के लिए, केवल CSS का उपयोग करने के लिए सबसे अच्छी बात यह है कि नियम को सेट करना है

overflow: hidden;

उस तत्व के लिए जिसमें वह पाठ है जिसे आप लपेटना चाहते हैं। यह पाठ को लपेटता नहीं है, लेकिन पाठ के उस भाग को छिपा देता है जो कंटेनर की सीमा से अधिक है । यह एक अच्छा समाधान हो सकता है यदि आपके लिए सभी पाठ प्रदर्शित करना आवश्यक नहीं है (अर्थात यदि पाठ एक <a>टैग के अंदर है )

— alexmeia
स्रोत

वर्ड-रैप: ब्रेक-वर्ड फ़ायरफ़ॉक्स 10. में मेरे लिए ठीक काम करता है।

— जॉन श्नाइडर

CanIUse का कहना है कि यह IE8 +, Firefox28 +, Chrome33 +, Safari7 + और अधिक के साथ संगत है। caniuse.com/#search=word-wrap

— Adrien Be

4

अद्यतन: सीएसएस में इसे संभालना बहुत सरल और कम ओवरहेड है, लेकिन आपके पास ऐसा कोई नियंत्रण नहीं है कि जब वे करते हैं तो ब्रेक कहाँ होता है। यदि आप परवाह नहीं करते हैं तो ठीक है, या आपके डेटा में बिना किसी प्राकृतिक ब्रेक के लंबे अल्फ़ान्यूमेरिक रन हैं। हमारे पास बहुत सारे लंबे फ़ाइल पथ, URL और फ़ोन नंबर थे, जिनमें से सभी स्थानों पर दूसरों की तुलना में इसे तोड़ना काफी बेहतर है।

हमारा समाधान पहले हर 15 (कहते हैं) वर्णों के बाद एक शून्य-चौड़ाई वाले स्थान (& # 8203;) को डालने के लिए एक रेगेक्स रिप्लेसमेंट का उपयोग करना था, जो कि व्हाट्सएप या विशेष वर्णों में से एक नहीं हैं जहां हम विराम पसंद करेंगे। हम उन विशेष पात्रों के बाद शून्य-चौड़ाई वाले स्थान को रखने के लिए एक और प्रतिस्थापन करते हैं।

शून्य-चौड़ाई रिक्त स्थान अच्छे हैं, क्योंकि वे स्क्रीन पर कभी दिखाई नहीं देते हैं; जब वे दिखाए गए थे तो शर्मीली हाइफ़न्स भ्रमित कर रही थीं, क्योंकि डेटा में महत्वपूर्ण हाइफ़न हैं। जब आप पाठ को ब्राउज़र से कॉपी करते हैं तो शून्य-चौड़ाई वाले स्थान भी शामिल नहीं होते हैं।

वर्तमान में हम जिन विशेष विराम पात्रों का उपयोग कर रहे हैं, वे हैं, फ़ॉरवर्ड स्लैश, बैकस्लैश, अल्पविराम, अंडरस्कोर, @,।, और हाइफ़न। आपको नहीं लगता कि आपको हाइफ़न के बाद ब्रेकिंग को प्रोत्साहित करने के लिए कुछ भी करने की ज़रूरत होगी, लेकिन फ़ायरफ़ॉक्स (3.6 और 4 कम से कम) अपने आप में नंबरों (जैसे फोन नंबर) से घिरा हाइफ़न पर नहीं टूटता है।

हम उपलब्ध लेआउट स्थान के आधार पर, कृत्रिम विराम के बीच वर्णों की संख्या को नियंत्रित करना चाहते थे। इसका मतलब था कि लंबे गैर-ब्रेकिंग रनों के मिलान के लिए रेगेक्स को गतिशील होने की आवश्यकता थी। इसे बहुत कुछ कहा जाता है, और हम प्रदर्शन के कारणों के लिए एक ही समान रीगेक्स बनाना नहीं चाहते हैं, इसलिए हमने रेगेक्स एक्सप्रेशन और इसके झंडे के द्वारा एक साधारण रेगेक्स कैश का उपयोग किया।

यहाँ कोड है; संभवतः आप एक उपयोगिता पैकेज में कार्यों को नामांकित करते हैं:

makeWrappable = function(str, position)
{
    if (!str)
        return '';
    position = position || 15; // default to breaking after 15 chars
    // matches every requested number of chars that's not whitespace or one of the special chars defined below
    var longRunsRegex = cachedRegex('([^\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^\\s\\.\/\\,_@\\|-])', 'g');
    return str
                .replace(longRunsRegex, '$1&#8203;') // put a zero-width space every requested number of chars that's not whitespace or a special char
                .replace(makeWrappable.SPECIAL_CHARS_REGEX, '$1&#8203;'); // and one after special chars we want to allow breaking after
};
makeWrappable.SPECIAL_CHARS_REGEX = /([\.\/\\,_@\|-])/g; // period, forward slash, backslash, comma, underscore, @, |, hyphen


cachedRegex = function(reString, reFlags)
{
    var key = reString + (reFlags ? ':::' + reFlags : '');
    if (!cachedRegex.cache[key])
        cachedRegex.cache[key] = new RegExp(reString, reFlags);
    return cachedRegex.cache[key];
};
cachedRegex.cache = {};

इस तरह टेस्ट करें:

makeWrappable('12345678901234567890 12345678901234567890 1234567890/1234567890')

अद्यतन 2: ऐसा प्रतीत होता है कि वास्तव में शून्य-चौड़ाई रिक्त स्थान हैं में कम से कम कुछ परिस्थितियों में कॉपी किए गए पाठ में शामिल , आप उन्हें नहीं देख सकते। जाहिर है, इसमें छिपे हुए चरित्रों के साथ लोगों को पाठ की नकल करने के लिए प्रोत्साहित करना एक ऐसा डेटा है जो अन्य कार्यक्रमों या प्रणालियों में दर्ज किया गया है, यहां तक कि अपने स्वयं के, जहां यह समस्या पैदा कर सकता है। उदाहरण के लिए, यदि यह किसी डेटाबेस में समाप्त हो जाता है, तो इसके विरुद्ध खोज विफल हो सकती है, और इस तरह के खोज भी विफल होने की संभावना है। इस तरह से डेटा के माध्यम से स्थानांतरित करने के लिए तीर कुंजियों का उपयोग करना (ठीक से) एक अतिरिक्त कीपर को आपके द्वारा देखे जाने वाले चरित्र के पार जाने के लिए, यदि वे नोटिस करते हैं, तो उपयोगकर्ताओं के लिए कुछ विचित्र।

एक बंद प्रणाली में, आप अपने आप को बचाने के लिए इनपुट पर उस चरित्र को फ़िल्टर कर सकते हैं, लेकिन यह अन्य कार्यक्रमों और प्रणालियों की मदद नहीं करता है।

सभी ने बताया, यह तकनीक अच्छी तरह से काम करती है, लेकिन मैं निश्चित नहीं हूं कि ब्रेक-एंड कैरेक्टर का सबसे अच्छा विकल्प क्या होगा।

अपडेट 3: डेटा में इस पात्र का अंत होना एक सैद्धांतिक संभावना नहीं है, यह एक देखी गई समस्या है। उपयोगकर्ता स्क्रीन से कॉपी किए गए डेटा को सबमिट करते हैं, यह db में सेव हो जाता है, ब्रेक खोजता है, चीजें अजीब तरह से आदि।

हमने दो काम किए:

इस ऐप के लिए सभी डेटा स्रोतों में सभी तालिकाओं के सभी स्तंभों से उन्हें निकालने के लिए एक उपयोगिता लिखी।
जोड़ा गया फ़िल्टरिंग हमारे मानक स्ट्रिंग इनपुट प्रोसेसर को हटाने के लिए, इसलिए यह उस समय तक चला जाता है जब कोई भी कोड इसे देखता है।

यह अच्छी तरह से काम करता है, जैसा कि तकनीक ही करती है, लेकिन यह एक सतर्क कहानी है।

अपडेट 4: हम इसे एक ऐसे संदर्भ में उपयोग कर रहे हैं, जहां इसे खिलाया गया डेटा HTML बच सकता है। सही परिस्थितियों में, यह HTML संस्थाओं के बीच में शून्य-चौड़ाई वाले रिक्त स्थान सम्मिलित कर सकता है, जिसमें फ़ंकी परिणाम होते हैं।

इस तरह से हम जिन पात्रों को नहीं तोड़ते, उनकी सूची में एम्परसेंड को ठीक करना था:

var longRunsRegex = cachedRegex('([^&\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^&\\s\\.\/\\,_@\\|-])', 'g');

— enigment
स्रोत

मैंने इसका उपयोग किया था, लेकिन मुझे केवल एक बार लंबे डोमेन नाम के लिए इसे चलाने की आवश्यकता थी, इसलिए मैंने इसे छोटा कर दिया:if(domainName.length > 15) domainName.replace(/([^\\s]{5})(?=[^\\s])/g, '$1');

— CBarr

3

काम करने के लिए वर्ड-रैप के लिए "टेबल-लेआउट: फिक्स्ड" सेट करने की आवश्यकता है

— Aleks
स्रोत

1

इसके लिए शुक्रिया! शब्द-लपेट: विराम; अन्यथा तालिकाओं के लिए काम नहीं करेगा।

— liviucmg

2

HYPHENATOR सही उत्तर है (ऊपर दिया गया है)। आपके प्रश्न के पीछे असली समस्या यह है कि वेब ब्राउजर अभी भी (2008 में) अत्यंत प्राचीन हैं कि उनमें हाइफ़नेशन-फ़ीचर नहीं है। देखिए, हम अभी भी कंप्यूटर उपयोग की शुरुआती शुरुआत में हैं - हमें धैर्य रखना होगा। जब तक डिजाइनर वेब दुनिया पर राज करते हैं तब तक हमारे पास कुछ वास्तविक उपयोगी नई सुविधाओं की प्रतीक्षा में एक कठिन समय होगा।

अद्यतन: दिसंबर, 2011 तक, हमारे पास अब एक और विकल्प है, जिसमें एफएफ और सफारी में इन टैगों के उभरते समर्थन के साथ:

p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

मैंने कुछ बुनियादी परीक्षण किए हैं और यह मोबाइल सफारी और सफारी 5.1.1 के हालिया संस्करण पर काम करता है।

संगतता तालिका: https://developer.mozilla.org/en/CSS/hyphens#AutoCompatibilityTable

— सनकी प्यार
स्रोत

2

IE 8+ उपयोग के साथ संगतता के लिए:

-ms-word-break: break-all;
     word-break: break-all;

     /* Non standard for webkit */
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

इसे यहां देखें http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

मुझे बस इतना करना था कि इसे एक सेट चौड़ाई के साथ डिव कंटेनर की शैली पर लागू करें।

— DoctorFox
स्रोत

2

इसे इस्तेमाल करो

word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-all;

— जय पटेल
स्रोत

1

यदि आपके पास यह है -

  <style type="text/css">
      .cell {
            float: left;
            width: 100px;
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="cell">TopLeft</div>
  <div class="cell">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
  <div class="cell">TopRight</div>
  <br/>
  <div class="cell">BottomLeft</div>
  <div class="cell">BottomMiddle</div>
  <div class="cell">bottomRight</div>

बस एक ऊर्ध्वाधर प्रारूप में स्विच करें जिसमें divs हैं और चौड़ाई के बजाय अपने CSS में न्यूनतम चौड़ाई का उपयोग करें -

  <style type="text/css">
      .column {
            float: left;
            min-width: 100px;
      }
      .cell2 {
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="column">
      <div class="cell2">TopLeft</div>
      <div class="cell2">BottomLeft</div>
  </div>
  <div class="column">
      <div class="cell2">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
      <div class="cell2">BottomMiddle</div>
  </div>
  <div class="column">
      <div class="cell2">TopRight</div>
      <div class="cell2">bottomRight</div>
  </div>
  <br/>

बेशक, यदि आप वास्तविक सारणीबद्ध डेटा प्रदर्शित कर रहे हैं, तो वास्तविक तालिका का उपयोग करना ठीक है क्योंकि यह शब्दार्थ से सही है और स्क्रीन रीडर का उपयोग करने वाले लोगों को सूचित करेगा जो तालिका में होना चाहिए। यह उन्हें सामान्य लेआउट या छवि-स्लाइसिंग के लिए उपयोग कर रहा है जो लोग आपके लिए लिंच करेंगे।

— डैन ब्रोउन
स्रोत

1

मुझे निम्नलिखित कार्य करने थे, क्योंकि यदि गुण सही क्रम में घोषित नहीं किए गए थे, तो यह बेतरतीब ढंग से गलत जगह पर शब्दों को तोड़ देगा और एक हाइफ़न को जोड़े बिना।

    -moz-white-space: pre-wrap;
white-space: pre-wrap;        
    hyphens: auto;
    -ms-word-break: break-all;
    -ms-word-wrap: break-all;
    -webkit-word-break: break-word;
    -webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
hyphens: auto;

मूल रूप से Enigmo द्वारा पोस्ट किया गया: https://stackoverflow.com/a/14191114

— jacobsvensson
स्रोत

1

हाँ, यदि यह संभव है, तो एक निरपेक्ष चौड़ाई सेट करना और सेटिंग overflow : autoअच्छी तरह से काम करती है।

— जॉन गिएत्जन
स्रोत

1

p {
    overflow-wrap: break-word;
}


@-moz-document url-prefix() { 
    p {
        white-space: -moz-pre-wrap;
        word-wrap: break-word;
    }
}

— microbians
स्रोत

0

"वर्ड-रैप: ब्रेक-वर्ड" फ़ायरफ़ॉक्स 3.5 http://hacks.mozilla.org/2009/06/06/word-wrap/ में काम करता है

— mb21
स्रोत

0

इसे cssअपने div में जोड़ें :word-wrap: break-word;

— किशन सुभाष
स्रोत

0

सभी शब्दों के लपेटने और टूटने के बाद, अपने अतिप्रवाह को संरक्षित करें और देखें कि क्या यह आपके मुद्दे को हल करता है। बस अपने div के डिस्प्ले को इसमें बदलें:display: inline;

— ओलफू मार्क
स्रोत

-1

एक साधारण कार्य (अंडरस्कोर की आवश्यकता होती है। Js) - @porneL उत्तर के आधार पर

    String.prototype.shyBreakString = function(maxLength) {
        var shystring = [];
        _.each(this.split(' '), function(word){
            shystring.push(_.chop(word, maxLength).join('&shy;'));
        });
        return shystring.join(' ');
    };

— hharnisc
स्रोत

-1

मैंने एक फ़ंक्शन लिखा है जो महान काम करता है जहां यह शब्द को अच्छी लाइन ब्रेकिंग के लिए एक्स अक्षर सम्मिलित करता है । यहां सभी उत्तर सभी ब्राउज़रों और उपकरणों का समर्थन नहीं करते थे, लेकिन यह PHP का उपयोग करके अच्छी तरह से काम करता है:

/**
 * Add line-break to text x characters in
 * @param  string  $text          
 * @param  integer $characters_in 
 * @return string                 
 */
function line_break_text($text, $characters_in = 10) {

    $split = explode(' ', $text);

    if ( ! empty($split)) {

        foreach ($split as $key => $var) {

            if ( strlen($var) > $characters_in ) {

                $split[$key] = substr_replace($var, '&shy;', $characters_in, 0);

            }

        }

    }

    return implode(' ', $split);

}

— जैक
स्रोत

मेरे तलाक को तोड़ने से लंबे शब्दों को कैसे रोकें?

मुलायम हाइफ़न

<wbr> तत्त्व

रेट्रो-व्हिंगिंग समाधान

`<wbr>` तत्त्व