क्या मैं एक div ब्लॉक में टेक्स्ट को ओवरफ्लो होने से रोक सकता हूं?

Question

क्या मैं एक div ब्लॉक में टेक्स्ट को ओवरफ्लो होने से रोक सकता हूं?

Comments

आपका पाठ अतिप्रवाह क्यों है?

— विराट कडरू

@ViratKadaru ... क्योंकि यह 360 ग्रेगोरियन चंट सेरिफ़ है

— ड्यूकडेंटन्यूकेम

Answer 1

यदि आप चाहते हैं कि डिव में अतिप्रवाहित पाठ छिपा हुआ या स्क्रॉलबार बनाने के बजाय स्वचालित रूप से नई पंक्ति में आए, तो उपयोग करें

word-wrap: break-word

संपत्ति।

Comments

https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap

— खतरनाक

उपयोगकर्ता को उत्तर के रूप में इसे जांचना होगा। यह आज मेरे लिए काम किया! धन्यवाद मित्र!

— एडुआर्डो ए। फर्नांडीज डिआज

ओह मेरी अच्छाई आपको इस एक के लिए बहुत बहुत धन्यवाद, मैं सचमुच कुछ समस्याओं का पागल बीसी चला गया हूं जिसे मैं आपके जवाब से हल कर सकता हूं !! XD

— स्वेन

Answer 2

तुम कोशिश कर सकते हो:

<div id="myDiv">
    stuff 
</div>

#myDiv {
    overflow:hidden;
}

की जाँच करें अतिप्रवाह संपत्ति के लिये दस्तावेज और जानकारी के लिए।

Comments

वे "डॉक्स" नहीं हैं, यह HTML / CSS के बारे में कुछ बुनियादी जानकारी के साथ एक वेब साइट है। डॉक्स w3.org पर हैं

— DisgruntledGoat

Answer 3

आप लंबे पाठ को छोटा करने के लिए CSS संपत्ति पाठ-अतिप्रवाह का उपयोग कर सकते हैं।

<div id="greetings">
  Hello universe!
</div>

#greetings
{
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; // This is where the magic happens
}

संदर्भ: http://makandracards.com/makandra/5883-use-css-text-overflow-to-truncate-long-texts

Answer 4

आप इसे सीएसएस के साथ नियंत्रित कर सकते हैं, कुछ विकल्प हैं:

• छिपा -> सभी पाठ अतिप्रवाह छिपा होगा।
• दृश्यमान -> पाठ अतिप्रवाहित होने दें।
• स्क्रॉल -> यदि टेक्स्ट ओवरफ्लो होता है तो स्क्रॉल बार लगाएं

आशा करता हूँ की ये काम करेगा।

Answer 5

बस इसका उपयोग करें:

white-space: pre-wrap;      /* CSS3 */   
white-space: -moz-pre-wrap; /* Firefox */    
white-space: -pre-wrap;     /* Opera <7 */   
white-space: -o-pre-wrap;   /* Opera 7 */    
word-wrap: break-word;      /* IE */

Answer 6

एक और सीएसएस संपत्ति है:

white-space : normal;

व्हाइट-स्पेस प्रॉपर्टी यह नियंत्रित करती है कि जिस तत्व पर इसे लागू किया गया है, उस पर टेक्स्ट कैसे संभाला जाता है।

div {

  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 

}

Comments

यह वास्तव में अतिप्रवाह के साथ संयोजन में सहायक है: छिपा हुआ;

— कोपरपोपर

Answer 7

समस्या को ठीक करने के लिए इस वर्ग को जोड़ने का प्रयास करें:

.ellipsis {
  text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

इस लिंक में आगे बताया गया है http://css-tricks.com/almanac/properties/t/text-overflow/

Answer 8

overflow: scroll? या ऑटो। शैली की विशेषता में।

Answer 9

मुझे लगता है कि आपको w3 से मूल बातें शुरू करनी चाहिए

https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

div {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

Answer 10

यदि आपके div में css की ऊँचाई है, जो इसे div के बाहर ओवरफ्लो करने का कारण बनेगी।

यदि आप की जरूरत है कि आप इसे न्यूनतम ऊंचाई दे सकते हैं, तो आपको हर समय div पर न्यूनतम ऊंचाई रखना होगा।

IE6 में न्यूनतम ऊंचाई काम नहीं करेगी, यदि आपके पास IE6 विशिष्ट स्टाइलशीट है तो आप इसे IE6 के लिए एक नियमित ऊंचाई दे सकते हैं। IE6 में सामग्री के अनुसार ऊँचाई बदलती है।

Answer 11

आप उदाहरण के लिए, css में न्यूनतम चौड़ाई सेट कर सकते हैं:

.someClass{min-width: 980px;}

यह नहीं टूटेगा, फिर भी आपके पास निपटने के लिए स्क्रॉल-बार होगा।

Answer 12

आपके सीएसएस के किस हिस्से को कैसे पकड़ा जाए, इसके लिए सिफारिशें इस समस्या का कारण बन रही हैं:

1) style="height:auto;"सभी <div>तत्वों पर सेट करें और फिर से प्रयास करें।

2) style="border: 3px solid red;"सभी <div>तत्वों को सेट करके देखें कि आपके क्षेत्र का <div>बॉक्स कितना चौड़ा है ।

3) height:#px;अपने सीएसएस से सभी सीएसएस गुणों को दूर करें और शुरू करें।

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

<div id="I" style="height:auto;border: 3px solid red;">I
    <div id="A" style="height:auto;border: 3px solid purple;">A
        <div id="1A" style="height:auto;border: 3px solid green;">1A
        </div>
        <div id="2A" style="height:auto;border: 3px solid green;">2A
        </div>
    </div>
    <div id="B" style="height:auto;border: 3px solid purple;">B
        <div id="1B" style="height:auto;border: 3px solid green;">1B
        </div>
        <div id="2B" style="height:auto;border: 3px solid green;">2B
        </div>
    </div>
</div>

Answer 13

.NonOverflow {
    width: 200px; /* Need the width for this to work */
    overflow: hidden;
}

<div class="NonOverflow">
    Long Text
</div>

Comments

बहुभाषी पाठ के अलावा, यह लंबे अक्षरों के कुछ वर्णों को प्रदर्शन से छिपा देता है।

— भुप्पी

Answer 14

!! आगे हार्ड कोडेड ट्रेडऑफ !! आसपास के कोड और स्क्रीन रिज़ॉल्यूशन के आधार पर यह भिन्न / अवांछित व्यवहार को जन्म दे सकता है

यदि छिपा हुआ अतिप्रवाह प्रश्न से बाहर है और सही हाइफ़नेशन की आवश्यकता है तो आप सॉफ्ट हाइफ़न एचटीएमएल इकाई का उपयोग कर सकते हैं जहाँ आप शब्द / पाठ को तोड़ना चाहते हैं। इस तरह आप मैन्युअल रूप से एक ब्रेकिंग पॉइंट को पूर्व निर्धारित करने में सक्षम हैं।

­

हाइफन केवल तब दिखाई देगा जब शब्द को अपने आसपास के कंटेनर को ओवरफ्लो न करने के लिए तोड़ने की आवश्यकता हो।

उदाहरण:

<div class="container">
  foo&shy;bar
</div>

यदि कंटेनर पर्याप्त चौड़ा है और टेक्स्ट कंटेनर को ओवरफ्लो नहीं करेगा, तो परिणाम:

foobar

परिणाम यदि कंटेनर छोटा है और पाठ वास्तव में कंटेनर को ओवरफ्लो करेगा:

foo-
bar

.container{
  background-color: green;
  max-width: 30px;
}

Example 1 - container to small => text overflows container:

<div class="container">
  foobar
</div>

Example 2 - using soft hyphen => text breaks at predetermined break point:

<div class="container">
  foo&shy;bar
</div>

Example 3 - using soft hyphen => text still overflowing because the text before the soft hyphen is to long:

<div class="container">
  foobar&shy;foo
</div>

अधिक जानकारी: https://en.wikipedia.org/wiki/Soft_hyphen