CSS टेक्स्ट-ओवरफ़्लो प्रॉपर्टी
उदाहरण
टेक्स्ट-ओवरफ़्लो प्रॉपर्टी का उपयोग:
div
{
white-space: nowrap;
overflow:
hidden;
text-overflow: ellipsis;
}
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
संपत्ति निर्दिष्ट करती है कि प्रदर्शित नहीं होने वाली text-overflow
सामग्री को उपयोगकर्ता को कैसे संकेतित किया जाना चाहिए। इसे क्लिप किया जा सकता है, एक इलिप्सिस (...) प्रदर्शित करें, या एक कस्टम स्ट्रिंग प्रदर्शित करें।
टेक्स्ट-ओवरफ़्लो के लिए निम्नलिखित दोनों गुण आवश्यक हैं:
- व्हाइट-स्पेस: अब्रैप;
- ओवर फलो हिडेन;
डिफ़ॉल्ट मान: | क्लिप |
---|---|
विरासत में मिला: | नहीं |
एनिमेटेबल: | नहीं। एनिमेटेबल के बारे में पढ़ें |
संस्करण: | CSS3 |
जावास्क्रिप्ट सिंटैक्स: | ऑब्जेक्ट .style.textOverflow="ellipsis" |
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
संख्या के बाद -o- उपसर्ग के साथ काम करने वाले पहले संस्करण को निर्दिष्ट करें।
Property | |||||
---|---|---|---|---|---|
text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
सीएसएस सिंटेक्स
text-overflow: clip|ellipsis|string|initial|inherit;
सम्पत्ति की कीमत
Value | Description | Play it |
---|---|---|
clip | Default value. The text is clipped and not accessible | |
ellipsis | Render an ellipsis ("...") to represent the clipped text | |
string | Render the given string to represent the clipped text | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
और ज्यादा उदाहरण
उदाहरण
होवर प्रभाव के साथ टेक्स्ट-ओवरफ़्लो (होवर पर संपूर्ण टेक्स्ट दिखाएं):
div.a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div.a:hover {
overflow: visible;
}
संबंधित पृष्ठ
सीएसएस ट्यूटोरियल: सीएसएस टेक्स्ट इफेक्ट्स
एचटीएमएल डोम संदर्भ: टेक्स्ट ओवरफ्लो संपत्ति