HTML DOM स्टाइल textOverflow प्रॉपर्टी

परिचय

DOM स्टाइल textOverflow प्रॉपर्टी HTML दस्तावेज़ में एलिमेंट कंटेनर के बाहर टेक्स्ट फ्लो होने पर क्या होना चाहिए, यह प्राप्त करती है और लागू करती है।

सिंटैक्स

मान प्राप्त करना

object.style.textOverflow

मान सेट करना

object.style.textOverflow = "value"

मान

उदाहरण

पैराग्राफ टेक्स्ट के ओवरफ्लो व्यवहार को ellipsis में बदलना:

<!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 स्टाइल textOverflow प्रॉपर्टी उदाहरण</h1>
<p>
  यह पैराग्राफ 1 कुछ डमी टेक्स्ट के साथ है। यह पैराग्राफ 1 कुछ डमी टेक्स्ट के साथ है।
  यह पैराग्राफ 1 कुछ डमी टेक्स्ट के साथ है। यह पैराग्राफ 1 कुछ डमी टेक्स्ट के साथ है।
  यह पैराग्राफ 1 कुछ डमी टेक्स्ट के साथ है। यह पैराग्राफ 1 कुछ डमी टेक्स्ट के साथ है।
</p>
<button onclick="add()" class="btn">textOverflow बदलें</button>
<script>
  function add() {
    document.querySelector('p').style.textOverflow = "ellipsis";
  }
</script>
</body>
</html>

आउटपुट

"textOverflow बदलें" बटन पर क्लिक करने पर ओवरफ्लो हो रहे पैराग्राफ टेक्स्ट के व्यवहार में बदलाव आएगा और ellipsis (...) जुड़ जाएगा।