text-overflow प्रॉपर्टी

text-overflow प्रॉपर्टी कटे हुए टेक्स्ट के अंत में एलिप्सिस जोड़ती है इस बात के संकेत के रूप में कि टेक्स्ट ब्लॉक में फिट नहीं हुआ और उसे काट दिया गया था।

प्रॉपर्टी के काम करने के लिए टेक्स्ट को overflow प्रॉपर्टी या overflow-x प्रॉपर्टी के माध्यम से hidden, auto या scroll वैल्यू में काटा जाना चाहिए। अगर visible सेट है (जो कि डिफ़ॉल्ट रूप से है) - तो text-overflow काम नहीं करेगा।

सिंटैक्स

cssसिलेक्टर {
  text-overflow: ellipsis | clip;
}

वैल्यूज

डिफ़ॉल्ट वैल्यू: clip.

उदाहरण . बाहर निकलने वाला टेक्स्ट

इस उदाहरण में बहुत लंबा शब्द कंटेनर में फिट नहीं होगा और उसकी सीमाओं से बाहर निकल जाएगा। कटाव नहीं होता:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: visible;
  border: 1px solid red;
}

Результат:

उदाहरण . overflow प्रॉपर्टी जोड़ते हैं

अब, कंटेनर की सीमाओं से बाहर निकला हुआ सब कुछ, बस कट जाएगा:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  border: 1px solid red;
}

Результат:

उदाहरण . ellipsis वैल्यू

अब overflow प्रॉपर्टी के अतिरिक्त text-overflow को ellipsis वैल्यू में जोड़ेंगे। कटे हुए टेक्स्ट के अंत में एलिप्सिस जुड़ जाएगा:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

उदाहरण . स्क्रॉलबार के साथ

अगर overflow: auto और text-overflow: ellipsis सेट किया जाए, तो स्क्रॉलबार दिखाई देगा, लेकिन एलिप्सिस फिर भी जुड़ा रहेगा। उदाहरण में स्क्रॉलबार को स्क्रॉल करके देखें:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: auto;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

उदाहरण . अगर बहुत लंबे शब्द नहीं हैं

अगर इतने लंबे शब्द नहीं हैं कि वे कंटेनर की सीमा से बाहर निकलें, तो कटाव नहीं होगा (कुछ भी तो बाहर नहीं निकल रहा)। निम्नलिखित उदाहरण देखें:

html<div id="elem">
  Lorem ipsum dolor sit amet adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

उदाहरण . एक लाइन में टेक्स्ट

हालांकि, ऐसी स्थितियां होती हैं जब हम चाहते हैं कि टेक्स्ट कट जाए, अगर वह बहुत लंबा है (सामान्य रूप से टेक्स्ट, न कि अलग-अलग शब्द) और अगली लाइन पर न टूटे। यह white-space प्रॉपर्टी को nowrap वैल्यू में जोड़कर किया जाता है, जो टेक्स्ट को दूसरी लाइन पर टूटने से रोकता है। उदाहरण देखें, अब टेक्स्ट कट जाता है:

html<div id="elem">
  Lorem ipsum dolor sit amet adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

उदाहरण . प्रतिशत में चौड़ाई

अगर ब्लॉक की चौड़ाई % में सेट की जाए, तो कटाव भी सही ढंग से काम करेगा:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

यह भी देखें