Text per CSS und JS in einer Box aufteilen

Einen Kommentar schreiben

Oft steht man vor dem Problem das viel Text vorhanden ist aber nur wenig Platz. Als Beispiel kann man sich einen Shop vorstellen wo eine lange Produktbeschreibung zu dem üblichen Produktbild, angaben zu Bestelldaten und der Seite selbst, hinzukommen soll.
Mit ein wenig CSS und JS sollte das kein Problem mehr darstellen.
Im ersten Schritt erstellen wir denn gewünschten Text in einer neuen leeren datei(noch keine Dateiendung vergeben!) und die nötigen CSS Formatierungen dazu. Der Vorteil fängt hier schon an, statt denn Text mehrfach zu splitten und stückchenweise per Aufruf einer weiteren Seite zu holen, packen wir jetzt schon denn gesamten Text in eine einzige Datei.
Um eine gute Übersicht zu behalten und unnötig lange Ladezeiten zu sparen sollten auch gleich alle CSS classen erstellt werden und die classen im Text eingebunden werden. So bereiten wir denn Text für die JavaScript-Stringvariable ausgabe vor. Im Javascript sollte auch kein Anführungszeichen vorkommen, muss es jedoch sein sollte es in Hmtl Sonderzeichenkodierung eingefügt werden. Für " wäre das " um ganz sicher zu gehen das nichts schief gehen kann sollten auch andere Sonderzeichen dementsprechend benutzt werden auch keine größer/kleiner zeichen. Einfach in einer bevorzugten Suchmaschine nach Hmtl Sonderzeichenkodierung suchen.
Nun werden alle Leerzeichen durch Non-Breaking-Spaces () an Stellen ersetzt wo kein Textumbruch erwünscht ist, wie bei Überschriften z.B., bei ganzen Textpassagen natürlich aufpassen das der Non-Breaking Bereich nicht breiter wird als die Box selbst. Ergebnis wäre das der Text abgeschnitten wird und somit nicht mehr lesbar ist.
Ist nun der Text in der leeren Datei fertig geschrieben, fügen wir am Anfang var text=" vor denn Text und "; nach dem text und speichern die Datei z.B. als : text.js. Bei Shops und dergleichen wo so etwas natürlich öfter vorkommt sollte man es in die Datenbank schreiben und per PHP auslesen lassen. Doch das ist ein anderes Kapitel.

Text sollte dann so aussehen


var text="Text ohne Ende mit denn notwendig eingebunden CSS Classen........";

Kommen wir nun zum CSS das notwendig ist.

CSS Formatierung


	.haupttext
	{
	position : absolute;
	width : 1px;
	height : 1px;
	left : 1px;
	top : 1px;
	overflow : none;
	visibility : hidden;
	}
	.textraum
	{
	position : absolute;
	width : 400px;
	height : 400px;
	left : 100px;
	top : 100px;
	overflow : auto;
	border : 1px solid black;
	padding : 5px;
	font-family : verdana;
	font-size : 12px;
	
	}
	.headline
	{
	font-weight : bold;
	color : blue;
	}

Die Höhen und Weitenangaben können natürlich geändert werden, man sollte aber beachten das man im Javascript dann die Zeichenanzahl verringert um unnötige Scrollbalken innerhalb der Box zu vermeiden.
Im Headbereich der Seite fügen wir nun denn Scriptaufruf ein.

Text sollte dann so aussehen


<script src="text.js"></script>

An die Stelle wo die Ausgabe der Box ausgegeben werden soll binden wir das Javascript ein. Natürlich müssen die CSS Eigenschaften angepasst werden, Positionierungen, Schriftgrößen und andere Angaben.

Das Javascript


<script>
var zeichenanzahl = 1200; /* Anzahl der Textzeichen, die auf eine Seite kommen sollen */
var hilfe;
var neuerkontrollpunkt;
var laenge_mit_html=text.length;
var anzahl_seiten = Math.ceil(laenge_mit_html/zeichenanzahl)+1;
var daten = new Array(anzahl_seiten);
var splitpunkte = new Array(anzahl_seiten);
splitpunkte[0] = 0;
for(i=1;i<anzahl_seiten;i++)
	{
	/* Splitpunkte werden zunächst rein mathematisch berechnet */
	splitpunkte[i] = i*zeichenanzahl; 
	
	/* Kontrolle: Ist das Zeichen am Splitpunkt ein Leerzeichen? Wenn nicht, wird der Splitpunkt zum nächsten Leerzeichen verlegt */
	if (text.substr(splitpunkte[i],1) != " ")
		{
		hilfe = splitpunkte[i];
		hilfe1 = true;
		while (hilfe1)
			{
			hilfe++;
			if (text.substr(hilfe,1)==" " || hilfe > laenge_mit_html)
				{
				hilfe1 = false;
				}
			}
		splitpunkte[i]=hilfe+1;	
		}	
	
	/* Liegt der Splitpunkt innerhalb einer HTML-Klammer? Wenn ja, wird der Splitpunkt vor den Tagbeginn gelegt */	
	hilfe = splitpunkte[i];
	kontrollebeenden = false;
	taginside = false;
	for(ii=hilfe;ii>-1;ii--)
		{
		if (!kontrollebeenden)
			{
			if (text.substr(ii,1)==">")
				{
				kontrollebeenden = true;
				taginside = false;
				}
			if 	(text.substr(ii,1)=="<")
				{
				kontrollebeenden = true;
				taginside = true;
				splitpunkte[i] = ii;				
				}
			}
		}


		
		
	
	/* Die Textbrocken werden auf das Array Daten verteilt */
	daten[i-1] = text.substr(splitpunkte[i-1],splitpunkte[i]-splitpunkte[i-1]);
	}
	

textausgabe(0);


function textausgabe(seitennummer)
	{
	ausgabe=daten[seitennummer];
	ausgabe = ausgabe + "<br><br>";
	for(i=0;i<anzahl_seiten;i++)
		{
		if(daten[i]!=undefined)
			{
			seite = i+1;
			ausgabe = ausgabe + "<a href=javascript:textausgabe(" + i + ")>[" + seite + "]</a>  ";
			}
		}
	
	
	document.getElementById("haupttext").innerHTML = ausgabe;
	
	}	
</script>

Fertig und das Dokument kann getestet und etwaige Feinheiten vorgenommen werden.
So sollte es nun aussehen : Box im Test

Den Artikel verlinken:


<a href="http://www.pixelmania.at/text_in_box_aufteilen_per_css_javascript.php" title="Text per CSS und JS in einer Box aufteilen von pixelmania.at">Text per CSS und JS in einer Box aufteilen von pixelmania.at</a>

Leider noch kein Kommentar vorhanden.

Hier kannst Du Deinen Kommentar zu diesem Artikel schreiben.