Ich versuche grade den Inhalt eines divs, wenn ein overflow kommt, abzuschneiden und diesen dann mit ... anzuhängen allerdings obwohl es eigentlich passieren sollte wird in meinem code nichts abgeschnitten. Sieht jemand vieleicht den Fehler:
HTML:
<script language="javascript" type="text/javascript">
function breite() {
document.getElementById("test").innerText = document.getElementById("div").innerText + "...";
breite = document.getElementById("test").offsetWidth;
while (breite > document.getElementById("div").offsetWidth) {
text = document.getElementById("test").innerText;
space = text.lastIndexOf(" ");
document.getElementById("test").innerText = text.substr(0,72) + "...";
breite = document.getElementById("test").offsetWidth;
}
}
</script>
<html>
<head>
<title> Fixed Div mit Tooltip Text</title>
<style type="text/css">
#div {
width:500px;
height:20px;
overflow:hidden;
background-color:#FFE500;
text-align: center;
}
</style>
</head>
<body>
<div style="display: block; width: 500px; white-space:nowrap;" id="test"></div>
<div id="div" onmouseout="breite();">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</div>
</body>
</html>
