Div wenn Inhalt zu groß mit ... versehen

B

bRainLaG

Mitglied
Ich habe ein div gemacht, indem der Text abgeschnitten wird, wenn man an das Ende kommt. Nun wollte ich fragen gibt es die Möglichkeit, mittels einer Javascript Funktion zB. wenn er übersteht den Text am Ende mit ... zu versehen. Hat da jemand vieleicht einen Tipp oder auch vieleicht einen erklärenden Link.

HTML: 
<html>
<head>
	<title> Fixed Div mit Tooltip Text</title>
	<style type="text/css">
		#div {
			width:500px;
			height:20px;
			overflow:hidden;
			background-color:#FFE500;
	</style>
</head>

<body>
<div id="div"><font align=center>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.</font></div>
</body>
</html>
 
Soweit ichweiß gibt es keine Funktion die die Breite eines Textes direkt ermitteln kann. Du kannst aber den Text in einen zusätzlichen DIV Container packen und dessen Breite ermitteln.

Im Beispiel wird der Text immer am letzten Leerzeichen um ein Wort gekappt und dann ermittelt ob die Breite so dann passt.
Ganz wichtig ist das der Container eine Breite hat, sonst klappt es nicht!! Der Container ist im Beispiel sichtbar damit man sieht das es klappt, das muss natürlich dann noch geändert werden.


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, (space - 1)) + "...";
    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" onclick="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>
 
Sry for Doppelpost ich habe es mal geändert, das zumindest der Substring eigentlich die Länge des Restes haben sollte aber irgendwie funktioniert das nicht, sieht da wer den Fehler, ich bekomme nach wie vor den ganzen String und nicht am Endes der Container Width abgeschnitten.

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, (document.getElementById("div").offsetWidth)) + "...";
    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;
}
#tooltip{
	position: absolute;
	display: none;
	background-color:#FFFFFF;
		}
</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>

Außerdem verstehe ich diese Zeile am Endes des Scriptes nicht soganz:
HTML: 
breite = document.getElementById("text").offsetWidth;
 
Zuletzt bearbeitet:
Du hast bei dir:

Code: 
document.getElementById("test").innerText = text.substr(0, (document.getElementById("div").offsetWidth)) + "...";

In meinem Beispiel steht aber:

Code: 
document.getElementById("test").innerText = text.substr(0, (space - 1)) + "...";

Wobei ich eben bemerkt habe das "- 1" nicht stimmt da sonst der letzte Buchstabe abgeschnitten wird! Wenn du die Zeile änderst, sollte es klappen.

Die Zeile die du nicht verstehst macht nichts anderes wie nach jedem Durchlauf (wo am Textende ein Wort gekappt wurde) die neue Breite des DIVs und somit des Textes zu ermitteln.
 
Auch mit dem space funktioniert es leider nicht also zumindest bei mir nicht, hast denn mal getestet, ob bei einem Test ganze Code Teile abgeschniten werden?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück