DOM style textOverflow गुण लौटाता है और लागू करता है कि क्या होना चाहिए जब टेक्स्ट किसी HTML दस्तावेज़ में एलीमेंट कंटेनर के बाहर प्रवाहित होता है।
सिंटैक्स
निम्नलिखित वाक्य रचना है -
-
रिटर्निंग टेक्स्ट ओवरफ्लो
object.style.textOverflow
-
टेक्स्ट ओवरफ्लो को संशोधित करना
object.style.textOverflow = “value”
मान
यहाँ, मान हो सकता है -
| मान | स्पष्टीकरण |
|---|---|
| उत्तराधिकारी | यह इस गुण मान को इसके मूल तत्व से प्राप्त करता है। |
| प्रारंभिक | इसने इस गुण मान को इसके डिफ़ॉल्ट मान पर सेट किया है। |
| क्लिप | यह अतिप्रवाहित पाठ को क्लिप करता है। |
| दीर्घवृत्त | यह किसी एलीमेंट के क्लिप किए गए टेक्स्ट को दर्शाने के लिए एक इलिप्सिस ("...") सेट करता है। |
| स्ट्रिंग | यह दिए गए स्ट्रिंग को किसी तत्व के क्लिप किए गए पाठ का प्रतिनिधित्व करने के लिए सेट करता है। |
उदाहरण
आइए स्टाइल टेक्स्ट ओवरफ्लो प्रॉपर्टी का एक उदाहरण देखें -
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
p {
margin: 1.5rem auto;
border: 3px solid #fff;
width: 400px;
white-space: nowrap;
overflow: hidden;
text-overflow: visible;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>DOM Style textOverflow Property Example</h1>
<p>
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
</p>
<button onclick="add()" class="btn">Change textOverflow</button>
<script>
function add() {
document.querySelector('p').style.textOverflow = "ellipsis";
}
</script>
</body>
</html> आउटपुट
यह निम्नलिखित आउटपुट देगा -
“टेक्स्ट ओवरफ़्लो बदलें . पर क्लिक करें अतिप्रवाहित अनुच्छेद पाठ के व्यवहार को बदलने के लिए बटन। दीर्घवृत्त यहाँ जुड़ जाते हैं -
