nedenleri Üzerinde aşağıdaki özellikleri ayarlayın ettik <code><div></code> içinde bir <code><p></code> etiketine sahip

Question

taşması kelimeyi Algılama: <p> etiketi sonra büyük miktarda metin içeren bir kısmı kesilecektir

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

ise .

Amacım, gösterilen ilk kelimenin ne olduğunu algılamaktır. aşağıdaki senaryoda Örneğin

,: function kelime "patlayabilir" dönecekti

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'dan bildiğim bir taşma olup olmadığını anlamak çok kolay, ancak bunu bir adım daha ileri alabilir ve hangi kelimenin gizleneceğini ilk olarak tespit edebilir miyiz?

Answer 1

birden yaklaşımlar sonra ben en kolay birbiri ardına kelime ekleyerek düşünüyorum, o zaman kontrol ederseniz paragraf taşmaları: Tüm taşan içerik olduğu gibi bu aslında sonradan spead rendering iyileştir

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>

bir daha asla eklemedim.