Datenbank Rückgabewert sprengt DIV

[sceiler]

Hallo,

ich hab denke ich ein Problem was sowohl mein CSS, PHP und MySQL betrifft.

In der DB werden Beschreibungen vom Anwender gespeichert, die er selber schreibt. Die Eingabe erfolgt mittels eines textarea. Durch trial & error hab ich herausgefunden das wenn eine Zeile mehr als 78 Zeichen enthält meine DIV id="inhalt" gesprengt wird (geht über die div heraus).
"Normalerweise" ist alles in Ordnung und die Einträge werden alle richtig in der DIV angezeigt bzw Zeilenumbrüche passieren automatisch. Nur eben bis zu 78 Zeichen in eienr Zeile.

Das festlegen von festen Werten für die div bzw der Tabelle innerhalb der DIV brachten keine Änderung.

Meine nächste Idee wäre jetzt gewesen, die abgefragten Werte aus der DB erstmal in ein Array zu speichern und dann irgendwie zu schauen, dass er nach allen 78 Zeichen einen Zeilenumbruch macht.

Geht dies anders/einfacher?

[1UnitedPower]

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow@title=overflow und whitespace könnten interessant für dich sein.

Eine serverseitge Lösung wäre auch denkbar, aber einfach nach einer fixen Anzahl an Zeichen einen Umbruch ohne Worttrennungsregeln vorzunehmen halte ich für lieblos.

[ChrisB]

Hi,

Eine serverseitge Lösung wäre auch denkbar,

Oder eine clientseitige: http://code.google.com/p/hyphenator/

aber einfach nach einer fixen Anzahl an Zeichen einen Umbruch ohne Worttrennungsregeln vorzunehmen halte ich für lieblos.

Ich halte es aber für vertretbar, wenn es um user-generated content geht, und man den Aufwand gering halten will – mal ehrlich, wie oft kommen Wörter vor, die länger als 78 Zeichen (in diesem Fall) sind? (Gepostete URLs mögen eine Ausnahme darstellen – aber für die gibt es sowieso keine „Trennungsregeln“.)

In so fern kann man da m.E. auch durchaus mal schlicht zu word-wrap greifen.

MfG ChrisB

[1UnitedPower]

mal ehrlich, wie oft kommen Wörter vor, die länger als 78 Zeichen (in diesem Fall) sind?

Es ging um Zeilen nicht um Worte.

[ChrisB]

Hi,

mal ehrlich, wie oft kommen Wörter vor, die länger als 78 Zeichen (in diesem Fall) sind?

Es ging um Zeilen nicht um Worte.

In der unglücklich formulierten Problembeschreibung, ja.

Allerdings werden Zeilen problemlos umgebrochen, solange sie Wortgrenzen enthalten - und per HTML oder Formatierung nicht explizit vorgegeben ist, dass keine automatischen Umbrüche erfolgen sollen.

Ich nehme deshalb an, dass der Frager hier eigentlich Worte meinte, statt Zeilen.

MfG ChrisB

[1UnitedPower]

Ich nehme deshalb an, dass der Frager hier eigentlich Worte meinte, statt Zeilen.

Könnte sein, aber wir können nur raten. Wäre schön, wenn der OP sich mal dazu äußert.

[sceiler]

Ich nehme deshalb an, dass der Frager hier eigentlich Worte meinte, statt Zeilen.

Könnte sein, aber wir können nur raten. Wäre schön, wenn der OP sich mal dazu äußert.

Ich habe doch Zeichen geschrieben. Wenn ich in die DB gehe und nachzähle und in einer Zeile mehr als 78 Zeichen sind, dann sprengt er mir meine div box.

[1UnitedPower]

Ich habe doch Zeichen geschrieben. Wenn ich in die DB gehe und nachzähle und in einer Zeile mehr als 78 Zeichen sind, dann sprengt er mir meine div box.

Sowohl Worte und Zeilen bestehen aus Zeichen. Zeilen werden durch Zeilenumbrüche erzeugt, Worte durch Whitespace jeder Art.

[sceiler]

Ich nehme deshalb an, dass der Frager hier eigentlich Worte meinte, statt Zeilen.

Weder noch. Es geht hier um Zeichen, genau genommen um 78 Zeichen. Ich hätte dann halt im Array rigoros nach jedem 78. Zeichen einen Zeilenumbruch gemacht, auch wenn das Wort mittendrin unterbrochen wäre.

[dedlfix]

Tach!

Ich nehme deshalb an, dass der Frager hier eigentlich Worte meinte, statt Zeilen.
Weder noch. Es geht hier um Zeichen, genau genommen um 78 Zeichen.

Leerzeichen sind auch Zeichen und an denen bricht der Browser selbständig um. Selbst wenn dein Zeichenkonglomerat keine umbrechende Zeichen enthält und kein sinnvolles Wort ergibt, kannst du es trotzdem als ein Wort ansehen, denn der linguistische Unterschied spielt keine Rolle.

Ich hätte dann halt im Array rigoros nach jedem 78. Zeichen einen Zeilenumbruch gemacht, auch wenn das Wort mittendrin unterbrochen wäre.

Wenn dir schon die Ästhetik missfällt, die solche langen Wörter auf deine Ausgabe haben, dann sieht das da auch viel nicht besser aus:

Das ist ein Text |
mit              |
einemsehrlangenWo|
rtdarin          |

Wie schon angemerkt, ergibt das Umbrechen nach einer Zeichenanzahl nur bei diktengleichen Fonts (monospace) ein sinnvolles Ergebnis. Ansonsten bekommst du bei vielen m oder i sehr unterschiedliche Ergebnisse. Und dann siehst du an dem kleinen Beispiel, dass da eigentlich hinter dem "mit" noch eine Menge Platz für den ersten Teil des langen Wortes wäre. Immerhin sprengt das Wort nicht den Rahmen, aber der Text insgesamt bricht auch nicht besonders toll um.

dedlfix.

[sceiler]

Ok, ihr habt recht. :)

Momentan sieht für mich die einzige annehmbare Lösung folgende aus:

in CSS

#Inhalt table {
table-layout:fixed;
}

im HTML

<table style="width:100%">
<td style="width:5%">bla bla</td>

usw.

Ich gebe also den kleineren Spalten für ID zum Beispiel weniger Breite, so dass der Rest auf die größeren Spalten aufteilt. Lange Wörter wie xxxxxxxxxxxxxxxxxxxxxxxxxxx oder so gehen dadurch zwar in die anderen Spalten, aber ich werde dem User halt sagen dass er regelmäßig "Enter" drücken soll bei seiner Eingabe...

[Gunther]

Hi,

aber einfach nach einer fixen Anzahl an Zeichen einen Umbruch ohne Worttrennungsregeln vorzunehmen halte ich für lieblos.

Ich halte es aber für vertretbar, wenn es um user-generated content geht, und man den Aufwand gering halten will – mal ehrlich, wie oft kommen Wörter vor, die länger als 78 Zeichen (in diesem Fall) sind? (Gepostete URLs mögen eine Ausnahme darstellen – aber für die gibt es sowieso keine „Trennungsregeln“.)

ich mag mich ja irren, aber das kann IMHO doch nur dann "funktionieren", wenn

• eine Monospace Schriftart verwendet wird
• das Elternelement eine Breitenangabe relativ zur Schriftgröße hat

Ist nur eine der beiden Bedingungen nicht erfüllt, ist es zumindest fraglich, ob man das gewünschte Ergebnis erhält.

Und ich glaube, dass aktuell beim OP keine der Bedingungen erfüllt ist. ;-)

Gruß Gunther

[ChrisB]

Hi,

ich mag mich ja irren, aber das kann IMHO doch nur dann "funktionieren", wenn

… man die CSS-Eigenschaft nutzt, die ich erwähnte, ja.

MfG ChrisB

[Gunther]

Hi Chris,

sorry, irgendwie war ich hier beim Antworten wohl etwas von der Rolle ... - ich wollte gar nicht auf deinen Beitrag antworten, sondern vielmehr den OP darauf aufmerksam machen, dass sein Vorhaben:"Meine nächste Idee wäre jetzt gewesen, die abgefragten Werte aus der DB erstmal in ein Array zu speichern und dann irgendwie zu schauen, dass er nach allen 78 Zeichen einen Zeilenumbruch macht." nur dann überhaupt funktionieren kann, wenn eben die beiden Bedingungen erfüllt sind.

Ohne Frage würde ich aber hier auch sagen, dass

… man die CSS-Eigenschaft nutzt, die ich (du) erwähnte(st), ja.

Gruß Gunther

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

Oder eine clientseitige: http://code.google.com/p/hyphenator/

Das arme Kätzchen!

Mit Modernizr prüfen, ob CSS-Silbentrennung nativ unterstützt wird und den JavaScript-Fallback nur bei Bedarf laden.

Bei Bedarf kann auch heißen, darauf in Browsern zu verzichten, die Silbentrennung nicht nativ unterstützen.

… länger als 78 Zeichen … (Gepostete URLs mögen eine Ausnahme darstellen – aber für die gibt es sowieso keine „Trennungsregeln“.)

Wieso sollte man lange URLs ausgeschrieben darstellen wollen? Die möchte niemand abtippen. Automatisch verlinken, dann kann der angezeigte Linktext auch abgeschnitten werden.

Qapla'

[sceiler]

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow@title=overflow und whitespace könnten interessant für dich sein.

Ich habe jetzt alle 3 Möglichkeiten (overflow, white-space, und word-wrap) ausprobiert.
Nur bei overflow: auto wurde die Tabelle abgeschnitten, wenn sie über die Div Box herausragte und ich konnte innerhalb der Box scrollen. Schonmal ein Fortschritt :)

Ich würde es aber gerne so machen dass die einzelnen <td> innerhalb der Tabelle, wo die Texte angezeigt werden umgebrochen werden. Egal wie blöd es im nachhinein aussehen wird.

Hier mal ein Auszug aus meiner CSS und PHP(hier nur schematisch) Datei:

  
div#Inhalt {  
	margin: 0em 11em 1em 0em;  
	padding: 0 0 0 0.5em;  
	border: 1px solid silver;  
	overflow: auto;  
//	word-wrap: break-word;  
}

echo'  
<div id="Inhalt">  
<table>  
<td>'.$row['beschreibung'].'</td>  
</table>  
</div>';

Insgesamt hat die Tabelle mehrere Spalten, die diverse Daten anzeigen aber die Beschreibungsspalte ist am größten.

Vllt. verwende ich overflow, white-space und word-wrap falsch?

[1UnitedPower]

Vllt. verwende ich overflow, white-space und word-wrap falsch?

Schon möglich. Auf jedenfall verwendest du das table-Element falsch! Hast du nen Link zu deiner Seite?

[sceiler]

Vllt. verwende ich overflow, white-space und word-wrap falsch?

Schon möglich. Auf jedenfall verwendest du das table-Element falsch! Hast du nen Link zu deiner Seite?

Leider nein. Es ist ein internes Tool und läuft nur lokal.

Welche Informationen bräuchtest du? Kompletten CSS? kompletter php code für das darstellen der Informationen aus der DB?

[1UnitedPower]

Schick deinen HTML-Code mal durch einen Validator und bereiniger erst mal alle Fehler. Wenn dein ursprüliches Problem dann immernoch besteht, melde dich nochmal.

[sceiler]

Schick deinen HTML-Code mal durch einen Validator und bereiniger erst mal alle Fehler. Wenn dein ursprüliches Problem dann immernoch besteht, melde dich nochmal.

Gesagt getan. Keine Fehler drin aber mein Problem besteht immer noch.

[1UnitedPower]

Gesagt getan. Keine Fehler drin aber mein Problem besteht immer noch.

Dann erstell mal ein Fiddle mit dem genierten HTML und CSS. Sodass wir den Fehler nachvollziehen können.

[sceiler]

Gesagt getan. Keine Fehler drin aber mein Problem besteht immer noch.

Dann erstell mal ein Fiddle mit dem genierten HTML und CSS. Sodass wir den Fehler nachvollziehen können.

Das funktioniert nicht. Er gibt mir hunderte Fehlermeldungen etc. aus, weil die Funktionen etc. fehlen.

Meine "Lösung" sieht jetzt so aus: http://forum.de.selfhtml.org/my/?t=211807&m=1445931#m1445931

[Malcolm Beck´s]

مرحبا

<td>'.$row['beschreibung'].'</td>

Du solltest dir kurz Zeit nehmen und dir den Artikel Kontextwechsel zu Gemüte führen. Zumindest aber den Abschnitt, auf den ich verlinkt habe.

mfg

[sceiler]

مرحبا

<td>'.$row['beschreibung'].'</td>

Du solltest dir kurz Zeit nehmen und dir den Artikel Kontextwechsel zu Gemüte führen. Zumindest aber den Abschnitt, auf den ich verlinkt habe.

mfg

Hi,

danke für den Artikel. Ich verstehe aber nicht wirklich was du mir damit sagen willst. Der Validator zeigt kein Problem an, ich bekomme die richtigen Werte angezeigt und auch keine Fehlermeldungen.

Wäre also super wenn du mir vllt mit eigenen Worten sagen könntest, wo das Problem bei dieser Schreibweise ist.
Was nicht zu sehen ist, ist das der HTML Code dargestellt wird durch ein echo, also

echo ' <td>'.$row['beschreibung'].'</td>';

Danke :)

[ChrisB]

Hi,

Du solltest dir kurz Zeit nehmen und dir den Artikel Kontextwechsel zu Gemüte führen.

danke für den Artikel. Ich verstehe aber nicht wirklich was du mir damit sagen willst.

Hast du ihn komplett gelesen - auch die erste Seite?

Wäre also super wenn du mir vllt mit eigenen Worten sagen könntest, wo das Problem bei dieser Schreibweise ist.

Lies bitte außerdem http://de.wikipedia.org/wiki/Cross-Site-Scripting

MfG ChrisB

[sceiler]

Hast du ihn komplett gelesen - auch die erste Seite?

Nein, die habe ich nicht gelesen. Jetzt schon.

Wäre also super wenn du mir vllt mit eigenen Worten sagen könntest, wo das Problem bei dieser Schreibweise ist.

Also ist die Problematik hier das die Variable potenziell ' / usw. enthalten könnte?

Also soll ich überall wo ich Variablen an die DB übergebe diese mit mysql_real_escape_string() überprüfen bzw bei Zahlen intval()/floatval()?

[Malcolm Beck´s]

مرحبا

Also ist die Problematik hier das die Variable potenziell ' / usw. enthalten könnte?

Probiere mal aus, was passiert, wenn du in die Beschreibung folgendes eingügst.

<script>  
alert('Du wurdest gehackt!');  
</script>

Wenn das funktioniert, dann bist du anfällig für das sogenannte Cross-Site-Scripting.

Also soll ich überall wo ich Variablen an die DB übergebe diese mit mysql_real_escape_string() überprüfen bzw bei Zahlen intval()/floatval()?

Nein, du musst _jeden_ Kontextwechsel erkennen und richtig behandeln, immmer, nicht nur manchmal.
mysql_real_escape_string(); musst du verwenden, wenn du etwas in die Datenbank schreibst. Wenn du HTML erzeugst, muss es entsprechend behandelt werden, mit htmlspecialchars(); z. B..

mfg