शब्द का पता लगाने का कारण बनता है अतिप्रवाह

Question

मैं एक <div> जो मैं पर निम्नलिखित गुण निर्धारित किया है के अंदर एक <p> टैग है: <p> टैग पाठ का एक बहुत कुछ शामिल है

div { 
    height: 105px; 
    width: 60px; 
    overflow: hidden; 
} 

तो इसके बारे में कुछ काट दिया जाएगा ।

मेरा लक्ष्य यह पता लगाने के लिए है कि पहला शब्द क्या नहीं दिखाया जा रहा है।

उदाहरण के लिए

, इस परिदृश्य में:

div { 
 
    height: 105px; 
 
    width: 60px; 
 
    overflow: hidden; 
 
}

<div> 
 
    <p>People assume I'm a boiler ready to explode, but I actually have very low blood pressure, which is shocking to people.</p> 
 
</div>

समारोह शब्द "विस्फोट" लौट आते हैं।

मुझे this question से पता है कि अगर ओवरफ्लो है तो पता लगाना बहुत आसान है, लेकिन क्या हम इसे एक कदम आगे ले सकते हैं और पता लगा सकते हैं कि कौन सा शब्द छुपाया जा सकता है?

Answer 1

कई दृष्टिकोण के बाद मुझे लगता है कि सबसे आसान एक के बाद एक शब्द जोड़ने है, तो जाँच लें कि पैरा अतिप्रवाह:

window.onload=function(){ 
 

 
var el=document.getElementById("el"); 
 
var words=el.textContent.split(" "); 
 
el.textContent=""; 
 

 
var thatword=words.find(function(word,i){ 
 
    el.textContent+=(i?" ":"")+word; 
 
    //console.log(el.clientWidth,el.scrollWidth,el.clientHeight,el.scrollHeight); 
 
    return el.clientWidth < el.scrollWidth || el.clientHeight < el.scrollHeight; 
 
}); 
 

 
alert(thatword); 
 

 
};

#el { 
 
    height: 105px; 
 
    width: 60px; 
 
    overflow: hidden; 
 
}

<div> 
 
    <p id="el">People assume I'm a boiler ready to explode, but I actually have very low blood pressure, which is shocking to people.</p> 
 
</div>

यह वास्तव में सुधार बाद में spead रेंडरिंग सकता है के रूप में सभी उमड़ती सामग्री है फिर कभी नहीं जोड़ा