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

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

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

सिंटैक्स

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

वैल्यूज

वैल्यू	विवरण
`ellipsis`	कटे हुए टेक्स्ट के अंत में एलिप्सिस जोड़ता है।
`clip`	अंत में एलिप्सिस नहीं जोड़ता (यह डिफ़ॉल्ट वैल्यू है, जरूरत पड़ने पर प्रॉपर्टी के एक्शन को कैंसिल करने के लिए आवश्यक)।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

यह भी देखें

word-break और overflow-wrap प्रॉपर्टीज,
जो लंबे शब्द के अक्षरों को नई लाइन पर ले जाने की अनुमति देती हैं
hyphens प्रॉपर्टी,
जो शब्दों के सिलेबल्स में विभाजन को सक्षम करती है
overflow प्रॉपर्टी,
जो ब्लॉक की सीमा से बाहर निकलने वाले हिस्सों को काटती है