2017-07-10 37 views
5

taşması kelimeyi Algılama: <p> etiketi sonra büyük miktarda metin içeren bir kısmı kesilecektirnedenleri Üzerinde aşağıdaki özellikleri ayarlayın ettik <code><div></code> içinde bir <code><p></code> etiketine sahip

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?

+2

Bunu başarmanın iki yolu aklıma geliyor. Tabii js ile. Öncelikle, ebeveyn div genişliğini almanız gerekir, daha sonra her bir kelimeyi bir '' etiketine sarın ve x koordinatını genişliğinden daha büyük olana kadar konumlarına bakarak yineleyin. İkinci yöntem, başka bir 'p' elemanının oluşturulması ve genişliğin, ebeveyn div'dan daha büyük olana kadar, genişlik açısından kontrol eden harfle harf eklemesi olacaktır. –

+0

Teşekkürler Mark, sadece ikinci önerinizi uyguluyordum. Her seferinde bir kelimeyi işlemeye devam etmenin ve genişliği kontrol etmenin pahalı olduğunu düşünüyor musunuz? – MarksCode

+0

Düşünme. Bunu binlerce kez yapmadıkça. O zaman sorununuzu, bu kelimeyi aramayı içermeyen veya sadece bir çağrı yapacak olan ilk önerime değinmeyen bir çözüm düşünebilirsiniz. Btw, eğer fonksiyonunuzu başarılı bir şekilde yazarsanız, aynı soruna sahip kişilere yardımcı olmak için fonksiyonunuzun kodu ile kendi sorunuzu cevaplamanızı tavsiye ederim. –

cevap

4

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.