Detect Wort die Ursachen Überlauf

Ich habe einen <p>-Tag in einem <div>, die ich die folgenden Eigenschaften auf festgelegt haben:Detect Wort die Ursachen Überlauf

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

Wenn das <p> Tag eine Menge Text enthält einige davon werden dann abgeschnitten .

Mein Ziel ist es zu erkennen, was das erste Wort nicht angezeigt wird.

Zum Beispiel im folgende Szenario:

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>

die Funktion das Wort zurückkehren würde "explodieren".

Ich weiß aus this question, dass es ziemlich einfach zu erkennen ist, ob es einen Überlauf gibt, aber können wir diesen einen Schritt weiter gehen und erkennen, welches Wort das erste ist, das versteckt wird?

Quelle

2017-07-10 MarksCode

Zwei Möglichkeiten, dies zu erreichen, kommen mir in den Sinn. Alles natürlich mit js. Zuerst müßtest du die Eltern-Div-Breite erhalten, dann kannst du jedes Wort innerhalb eines ''-Tags einbinden und sie iterieren, indem du ihre Position ansiehst, bis du die x-Koordinate größer als die Breite findest. Die zweite Methode wäre, ein weiteres "p" -Element zu erstellen und Buchstabe für Buchstabe nach der Breite zu suchen, bis die Breite größer ist als das Elternteil. –

Danke Mark, ich habe gerade Ihren zweiten Vorschlag umgesetzt. Denkst du, es ist teuer, ein Wort nach dem anderen zu rendern und die Breite zu überprüfen? – MarksCode

Denke nicht so. Es sei denn, Sie würden dies Tausende Male tun. Dann könnten Sie sich eine Lösung für Ihr Problem vorstellen, bei der Sie nicht nach diesem Wort suchen oder zu meinem ersten Vorschlag wechseln müssen, der nur einen Render-Aufruf ergeben würde. Btw, wenn Sie Ihre Funktion erfolgreich schreiben, würde ich empfehlen, Ihre eigene Frage mit dem Code der Funktion zu beantworten, um anderen mit dem gleichen Problem zu helfen. –

Nach mehreren Ansätzen Ich denke, die einfachste ein Wort nach dem anderen hinzufügen, dann prüfen, ob die Absatzüberläuft:

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>

Dies kann tatsächlich später spead Rendering verbessern, da alle überquellenden Inhalt ist nie wieder hinzugefügt.

Quelle

2017-07-10 18:02:29

Detect Wort die Ursachen Überlauf

Antwort

Verwandte Themen