Erhalten Länge der letzten unvollständigen Textzeile in div

Question

Angesichts einer Div, die eine Menge Text enthält, die möglicherweise oder nicht umbrechen, suche ich nach der x-Position des Endes des Textes in besagtem div. Dies ist vom Benutzer generierter Text, so dass ich nicht weiß, was darin enthalten sein wird. Außerdem muss er XSS-sicher sein. Daher kann ich keine <span> Elemente in meinem Code verwenden, weil ein Benutzer ein Skript schreiben könnte, das ausgeführt werden kann.

Die hier angegebenen Lösungen sind großartig, aber würden unsichere Skripte potenziell im Browser ausführen.

find out length of last incomplete line of text in container

Idealerweise würde ich eine Methode mit einer Signatur etwas wie dieses:

int getPixelsFromLeftMostSideOfDiv (Element e)

Answer 1

diese XSS sein sollte sicher davon aus, dass die Art und Weise Sie den Benutzer setzen Text auf dem Bildschirm ist XSS-sicher.

Es folgt die Methode Ihrer verknüpften Lösung, eine span an das div anzuhängen und die x-Position dieses Bereichs zu erhalten. Dh

var text = document.getElementById('text'); 

var span = document.createElement('span'); 
text.appendChild(span); 

console.log(span.getBoundingClientRect().left); 

JSFiddle angebracht für Sie mit

https://jsfiddle.net/1d29c24d/1/