HTML में रैप टेक्स्ट कैसे वर्ड करें?

185

(जैसे ) aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaकी चौड़ाई से अधिक पाठ को कैसे लपेटा जा सकता है?div200px

मैं सीएसएस, jQuery, आदि जैसे किसी भी तरह के समाधान के लिए खुला हूं।

html css word-wrap

240

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

div {
    width: 200px;
    word-wrap: break-word;
}

— एलन हाग्गै अलवी
स्रोत

1

क्या मैं गलत हूं या शब्द-आवरण एक CSS3 की औचित्य है?

— गैब रॉय

13

यह CSS3 है, लेकिन यह लगभग सभी मुख्यधारा ब्राउज़रों में काम करता है, जिनमें IE5.5 -> 9 - caniuse.com/#search=word-wrap

— Jon Hadley

32

जब शब्द-रैप: ब्रेक-वर्ड; काम शब्द-विराम की कोशिश नहीं करता है: ब्रेक-ऑल; / * यह एक हत्यारा है * /

— redochka

@redochka लेकिन जब word-break: break-all;सामान्य पाठ में उपयोग किया जाता है तो यह बीच में शब्दों को तोड़ देता है, जो कि बदसूरत है ... क्या हमारे पास दोनों व्यवहारों का मिश्रण नहीं है?

— पवामोय

5

महत्वपूर्ण: यह है word-break: break-allऔर नहीं word-wrap: break-all। बनाने में आसान गलती

— सिमोन_विवर

58

बूटस्ट्रैप 3 पर, सुनिश्चित करें कि श्वेत-स्थान 'Nowrap' के रूप में सेट नहीं है।

div {
  width: 200px;
  word-break: break-all;
  white-space: normal;
}

— lukaserat
स्रोत

महान। मैंने वर्ड-ब्रेक का उपयोग करने की कोशिश की: ब्रेक-सभी एक ट्विटर बूटस्ट्रैप 3 पैनल बॉडी पर लेकिन यह कभी काम नहीं किया। सफेद-स्थान जोड़ना: सामान्य फिक्स था।

— कूलबॉयज्यूल्स

5

अच्छा, मुझे white-space: normal;काम करने से पहले भी इसकी आवश्यकता थी ।

— मूलांक

56

आप एक नरम हाइफ़न का उपयोग कर सकते हैं जैसे:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

इस रूप में दिखाई देगा

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

यदि युक्त बॉक्स पर्याप्त बड़ा नहीं है, या जैसा है

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

अगर यह होता है।

— किम स्टेबेल
स्रोत

18

लेकिन तुम कैसे जानोगे कि कहां रखा जाए ?

— कोस्टास

आप इसे लंबे शब्दों में डालते हैं जहां वे विभाजित हो सकते हैं। आप एक उपयुक्त शब्दकोश से स्वचालित रूप से उस जानकारी को प्राप्त कर सकते हैं।

— किम स्टेबेल

4

लेकिन उदाहरण के तौर पर जिबरिश के बारे में कैसे? यह ठीक चालू करने के लिए है aaaaaa...aaaaaमें aaaaaaa...aaaa?

— कोस्टास

19

ठीक वही जो मेरे द्वारा खोजा जा रहा था। मुझे यह पसंद है कि कुछ भी करने तक में शर्म

— आती है

3

यह ठीक काम करता है यदि लपेटा जाने वाला शब्द overly.long.java.package.name या कई डॉट्स के साथ कुछ समान स्ट्रिंग है। फिर आप & शर्मीली जोड़ सकते हैं; प्रत्येक डॉट के बाद।

— डोकसपर

28

   div {
    // set a width
    word-wrap: break-word
}

' word-wrap' समाधान केवल IE और ब्राउज़र समर्थन में काम करता है CSS3।

सबसे अच्छा क्रॉस ब्राउजर सॉल्यूशन आपके सर्वर साइड लैंग्वेज (php या जो भी) का उपयोग करना है, लंबी स्ट्रिंग्स का पता लगाने के लिए और नियमित अंतराल में उनके अंदर जगह बनाने के लिए html एंटिटी  यह इकाई लंबे शब्दों को अच्छी तरह से तोड़ती है, और सभी ब्राउज़रों पर काम करती है।

जैसे

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#8203;aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

— ओर सिलोनी
स्रोत

8

"उनके अंदर नियमित अंतराल में html संस्था # 8203" रखें, लेकिन फिर जब आप पाठ को कॉपी करके कहीं पेस्ट करने की कोशिश करेंगे, तो आपके पास बीच में एक यादृच्छिक यूनिकोड चरित्र होगा

— user102008

9

यदि IE, फ़ायरफ़ॉक्स, क्रोम, सफारी और ओपेरा में काम करने वाला केवल एक ही शब्द में कोई स्थान नहीं है (जैसे कि एक लंबा URL):

div{
    width: 200px;  
    word-break: break-all;
}

मैंने इसे बुलेट-प्रूफ पाया।

— काइल देहले
स्रोत

9

इसने मेरे लिए काम किया

word-wrap: normal;
word-break: break-all;
white-space: normal;
display: block;
height: auto;
margin: 3px auto;
line-height: 1.4;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

— अमोल
स्रोत

6

एक अन्य विकल्प भी उपयोग कर रहा है:

div
{
   white-space: pre-line;
}

यह आपके सभी ब्राउज़रों को सभी ब्राउज़रों में सेट कर देगा जो CSS1 का समर्थन करते हैं (जो IE 8 के रूप में अभी तक सभी सामान्य ब्राउज़रों का बहुत अधिक है)

— एंड्रयू मारैस
स्रोत

यदि आप एक है, तो <pre>तत्व आप शब्द रैपिंग, इस काम करता है और करना चाहते हैं word-breakया word-wrapनहीं।

— प्लूटो

4

क्रॉस ब्राउज़र

.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+ */
}

— कुसमय
स्रोत

2

इस सीएसएस को पैराग्राफ में जोड़ें।

style="width:420px; 
min-height:15px; 
height:auto!important; 
color:#666; padding: 1%; 
font-size: 14px; 
font-weight: normal;
word-wrap: break-word; 
text-align: left"

— स्वप्निल गोडाम्बे
स्रोत

2

मुझे text-overflow:ellipsisअगले आदमी जितना पसंद है , लेकिन यह इस सवाल का सही जवाब नहीं है। वह शब्द-लपेट को देख रहा है, अतिप्रवाह को नहीं काट रहा है।

— स्पडली

1

CSS ट्रिक्स से उदाहरण :

div {
    -ms-word-break: break-all;

    /* Be VERY careful with this, breaks normal words wh_erever */
    word-break: break-all;

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

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

अधिक उदाहरण यहाँ ।

— जुराज गुनीस
स्रोत

0

एक सर्वर साइड सॉल्यूशन जो मेरे लिए काम करता है, वह है: $message = wordwrap($message, 50, "<br>", true);जहां $messageएक स्ट्रिंग वैरिएबल है जिसमें शब्द / वर्ण टूटे हुए हैं। 50 किसी भी सेगमेंट की अधिकतम लंबाई है, और "<br>"वह पाठ है जिसे आप हर (50) वर्णों में सम्मिलित करना चाहते हैं।

— deshbanks
स्रोत

4

यह समाधान काम नहीं करेगा यदि 50 गुना चरित्र की चौड़ाई आवश्यक अधिकतम 200px से अधिक है। बस अपने ब्राउज़र के ज़ूमिंग फ़ंक्शन का उपयोग करें और आप अंततः इसे तोड़ते हुए देखेंगे ...

— dokaspar

0

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

div{
  display: block;
  display: -webkit-box;
  height: 20px;
  margin: 3px auto;
  font-size: 14px;
  line-height: 1.4;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

स्निपेट का विस्तार करें

संपत्ति पाठ-अतिप्रवाह: दीर्घवृत्त जोड़ ... और लाइन-क्लैंप लाइनों की संख्या दिखाते हैं।

— व्लादिमीर सालगुएरो
स्रोत

0

HTML बॉडी में कोशिश करें:

<table>
    <tr>
        <td>
            <div style="word-wrap: break-word; width: 800px">
                Hello world, how are you? More text here to see if it wraps after a long while of writing and it does on Firefox but I have not tested it on Chrome yet. It also works wonders if you have a medium to long paragraph. Just avoid writing in the CSS file that the words have to break-all, that's a small tip.
            </div>
        </td>
    </tr>
</table>

सीएसएस शरीर में कोशिश:

background-size: auto;

table-layout: fixed;

— Wesson2
स्रोत

0

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

div {display: inline;}

— माइकल मुलकिता
स्रोत

0

मैंने बूटस्ट्रैप का उपयोग किया है। मेरा html कोड दिखता है ..

<div class="container mt-3" style="width: 100%;">
  <div class="row">
    <div class="col-sm-12 wrap-text">
      <h6>
        text content
      </h6>
    </div>
  </div>
</div>

सीएसएस

.wrap-text {
     text-align:justify;
}

— राहुल वासनिक
स्रोत

बूटस्ट्रैप में text-justifyकक्षा है, इसलिए आप इसका उपयोग कर सकते हैं.wrap-text

— बारबसन

0

आप इस सीएसएस का उपयोग कर सकते हैं

p {
  width: min-content;
  min-width: 100%;
}

— राशिद इकबाल
स्रोत

0

प्रयत्न:

overflow-wrap: break-word;

— ईडन शरवित
स्रोत

-2

word-wrap:break-wordआवश्यक चौड़ाई के साथ विशेषता का उपयोग करें । मुख्य रूप से, पिक्सेल को चौड़ाई में रखें, प्रतिशत में नहीं।

width: 200px;
word-wrap: break-word;

— अक्स
स्रोत

14

यह ऊपर दिए गए उत्तर के समान है। क्यों परेशान?

— १०:५१