मैं एक निश्चित चौड़ाई के अंतराल में लंबे पाठ / शब्द को कैसे लपेट या तोड़ सकता हूं?

Question

मैं एक निश्चित चौड़ाई के साथ एक स्पैन बनाना चाहता हूं कि जब मैं स्पैन में किसी भी चीज को टाइप करता हूं <span>lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk</span>, जैसे कि नॉन-स्पान्ड टेक्स्ट का एक लंबा स्ट्रिंग, शब्द (ओं) को तोड़ने या अगली पंक्ति में लपेटने के लिए।

कोई विचार?

Answer 1

आप सीएसएस संपत्ति का उपयोग कर सकते हैं word-wrap:break-word;, जो शब्दों को तोड़ देगा यदि वे आपके स्पैन चौड़ाई के लिए बहुत लंबे हैं।

span { 
    display:block;
    width:150px;
    word-wrap:break-word;
}

<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>

Comments

Asp.net लेबल नियंत्रण के लिए अच्छी तरह से काम करता है। धन्यवाद!

— एटल्स

जोड़ा जा रहा है white-space: normal.. बाहरी स्टाइल कि जिस तरह से :) में मिल सकता है ओवरराइड करने के लिए मदद करता है inline-blockऔर साथ ही काम करता हैblock

— Katia

दो स्पैन को तोड़ने के बारे में क्या है जो एक ब्लॉक तत्व के अंदर हैं?

— डैनियल स्प्रिंगर

इस उत्तर का उपयोग करने के बाद भी जिन लोगों को परेशानी हो रही है, उनके लिए एक 'चौड़ाई' निर्दिष्ट करना सुनिश्चित करें अन्यथा यह काम नहीं कर सकता है

— Staccato

यह जानने के लिए कि चौड़ाई को तोड़ने के लिए चौड़ाई की आवश्यकता है

— DFSFOT

Answer 2

इसके अलावा के साथ सीएसएस निम्नलिखित प्रयास करें white-space:

span {
    display: block;
    word-wrap:break-word;
    width: 50px;
    white-space: normal
}

Comments

धन्यवाद! मैं यह पता नहीं लगा सका कि मेरा पाठ कभी क्यों नहीं लपेटा गया! व्हाइट-स्पेस इसका कारण था।

— mdiehl13

मेरा मुद्दा भी एक बार मैंने तय किया था:white-space: normal

— प्रमुखबूमर

यहाँ एक संदर्भ तालिका है जिसमें आपको सफ़ेद-स्थान और लपेटने की आवश्यकता है: css-tricks.com/almanac/properties/w/whitespace

— Hritik

Answer 3

ऐशे ही

डेमो

  li span{
    display:block;
    width:50px;
    word-break:break-all;
}

Comments

मेरे दोस्त मैं चाहते हैं जब स्पैन चौड़ाई डाल: 50 पीएक्स; मेरे स्पैन में मान केवल 50px में दिखाई देते हैं और अन्य मान अगली पंक्ति में चलते हैं और 50px में दिखाए जाते हैं !!!

— محمد ریری

@ mamal10 मैक्सिम लोरेंट के समाधान की जाँच करें।

— Mr_Green

Answer 4

डिफ़ॉल्ट रूप spanसे एक inlineतत्व है ... इसलिए यह डिफ़ॉल्ट व्यवहार नहीं है।

आप अपने सीएसएस में spanइस तरह से व्यवहार कर सकते हैं display: block;।

span {
    display: block;
    width: 100px;
}

Answer 5

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

span {
    display: block;
    width: 150px;
}

Answer 6

बस प्रश्न के व्यावहारिक दायरे का विस्तार करने के लिए और दिए गए उत्तरों के परिशिष्ट के रूप में: कभी-कभी किसी को चयनकर्ताओं को थोड़ा और निर्दिष्ट करने के लिए आवश्यक हो सकता है।

पूर्ण अवधि को प्रदर्शन के रूप में परिभाषित करके : इनलाइन-ब्लॉक में आपको छवियों को प्रदर्शित करने में मुश्किल समय हो सकता है।

इसलिए मैं एक अवधि को इस तरह परिभाषित करना पसंद करता हूं:

span {
  display:block;
  width:150px;
  word-wrap:break-word;      
}
p span, a span,
h1 span, h2 span, h3 span, h4 span, h5 span {
  display:inline-block;
}
img{
  display:block;
}

Answer 7

मेरे मामले में, डिस्प्ले: ब्लॉक डिजाइन को तोड़ रहा था।

max-widthसंपत्ति सिर्फ मुझे बचा लिया।

और स्टाइल के लिए, आप भी उपयोग कर सकते हैं text-overflow: ellipsis।

मेरा कोड था

max-width: 255px
overflow:hidden