Antworten auf deine Fragen:
Neues Thema erstellen

Lange Wörter verhindern Responsiv-Webdesign!

Overtone

Noch nicht viel geschrieben

Auf der Webseite Freelance-Market.de werden zahlreiche Freelancer-Profile angezeigt. Soeben wird die Seite umfangreich in Sachen “responsives Webdesign” überarbeitet. So passt sich die Seite dynamisch an die jeweilige Fensterbreite an. Bei schmalen Fenstern haben wir jetzt das Programmierproblem, dass wir längere Wörter nicht automatisch umbrechen können.

Zur Demonstration könnt Ihr mal auf http://www.freelance-market.de/c/IT-Webdesigner gehen und das Fenster sehr schmal ziehen. Dann sieht man, dass beim ersten Nutzerprofil die langen Begriffe “Suchmaschinenoptimierung” und “Suchmaschinenwerbung” über die Spalten (natürlich DIV)-Begrenzung hinaus laufen.

Zwei Lösungsansätze scheiden leider aus:
1. Wordwrap: Schneidet bei einer vorgegebenen Zeichenlänge strikt ab, ohne die orthografischen Regeln der deutschen Silbentrennung zu berücksichtigen. Mit einer Funktion ist es zwar dahin gehend zu erweitern, dass nicht die Zeichenlänge, sondern die Wortlänge berücksichtigt wird, jedoch wird auch dann die Silbentrennung nicht berücksichtigt. Darüber hinaus wird das jeweilige Wort IMMER getrennt, und nicht, wie gewünscht, nur bei fehlender Browserbreite!
2. Händische Korrektur der Datenbank-Einträge (Problem Die Seite soll auch in einen breiten Fenster gut erscheinen, also nicht etwa wie “Suchmaschinen-Werbung” )
Welche Lösungsvorschläge habt Ihr?
 

Hi Overtone,

es gibt in CSS noch eine Möglichkeit, für eine ordentliche und automatische Silbentrennung:

-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

Funktioniert allerdings nur in modernen Browsern und auch da nicht in allen. Ausnahmsweise gehört z.B. sogar der Chrome zu den Browsern, die es nicht unterstützen, obwohl der ja sonst immer ganz vorne mit dabei ist => http://caniuse.com/#search=hyphens

Ich benutze "hyphens" in meinem Blog, da kannst du dir das ganze also live ansehen (insofern der Browser es unterstützt): http://www.webdesign-podcast.de/

Der Effekt wird gerade bei langen Artikeln gut sichtbar: http://www.webdesign-podcast.de/201...ormance-optimierung-an-einem-praxis-beispiel/
 

Overtone

Noch nicht viel geschrieben

Ist Crossposting hier nicht so gerne gesehen? Beim xhtmlforum hat man mich sogar darauf aufmerksam gemacht den Thread zu verlinken!

Hi Overtone,

es gibt in CSS noch eine Möglichkeit, für eine ordentliche und automatische Silbentrennung:

-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

Das hatte ich jetzt bereits eingesetzt und für gut befunden. Bin da auch durch weitere Eigenrecherche drauf gekommen. Dass das beim Chrome nicht funktioniert war mir jedoch gar nicht bekannt.
 
Zuletzt bearbeitet von einem Moderator:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben