{"id":12055,"date":"2024-09-13T08:40:23","date_gmt":"2024-09-13T06:40:23","guid":{"rendered":"https:\/\/www.lamapoll.de\/blog\/?p=12055"},"modified":"2024-09-13T08:40:27","modified_gmt":"2024-09-13T06:40:27","slug":"gibt-es-automatische-silbentrennung-fuer-mobile-ansicht","status":"publish","type":"post","link":"https:\/\/www.lamapoll.de\/blog\/gibt-es-automatische-silbentrennung-fuer-mobile-ansicht\/","title":{"rendered":"Gibt es eine automatische Silbentrennung f\u00fcr die mobile Ansicht?"},"content":{"rendered":"\n

Sie haben Ihren Online-Fragebogen bei LamaPoll<\/a> erstellt und checken im n\u00e4chsten Schritt vor Ver\u00f6ffentlichung die mobile Ansicht in der Vorschau. Je nachdem, welchen Browser Sie verwenden, kann es gerade bei l\u00e4ngeren W\u00f6rtern oder bei W\u00f6rtern mit Trennzeichen passieren, dass der Text von Fragen oder Antworten nicht umbricht, sondern \u00fcber den Bildschirmrand l\u00e4uft (siehe Abbildung 1).<\/p>\n\n\n\n

\"\"<\/a>
Abb. 1 – Bei l\u00e4ngeren W\u00f6rtern oder bei W\u00f6rtern mit Trennzeichen kann es in der mobilen Ansicht bei bestimmten Browsern Darstellungsprobleme geben. <\/em><\/figcaption><\/figure>\n\n\n\n

Der Grund daf\u00fcr liegt nicht bei LamaPoll.<\/strong> Unser Tool hat keinen Einfluss darauf, ob und wie lange W\u00f6rter in Ihrem Browser getrennt werden. Viele Browser haben Probleme mit der Silbentrennung, was dazu f\u00fchrt, dass Ihr Text in der mobilen Ansicht \u00fcber den Bildschirmrand l\u00e4uft. <\/p>\n\n\n\n

Und jetzt einfach einen festen Bindestrich im Text setzen? Das hilft, die schlechte mobile Darstellung zu verbessern, f\u00fchrt aber m\u00f6glicherweise bei der Desktop-Ansicht dazu, dass Ihre Texte zerpfl\u00fcckt aussehen. Im besten Fall sollten Ihre Inhalte responsiv funktionieren. Mit anderen Worten: S\u00e4mtlicher Text passt sich dynamisch an die jeweilige Bildschirmgr\u00f6\u00dfe an, um sowohl auf Ihrem Desktop als auch auf jedem Smartphone gut und sinnvoll lesbar zu sein. Das gilt nat\u00fcrlich auch f\u00fcr die Silbentrennung. Eine automatische L\u00f6sung, die Ihnen dieses Problem abnimmt, gibt es allerdings nicht. Sie haben jedoch die M\u00f6glichkeit, diesen Umstand mit wenig Aufwand zu umgehen. Im Folgenden haben wir zwei L\u00f6sungsm\u00f6glichkeiten f\u00fcr Sie. <\/p>\n\n\n\n

1.) Setzen Sie Leerzeichen<\/strong><\/p>\n\n\n\n

Nicht nur lange W\u00f6rter und Zeichenketten verhindern unter Umst\u00e4nden einen sinnvollen Umbruch des Textes in Ihrer Browser-Ansicht. Auch Trennzeichen zwischen zwei oder mehreren W\u00f6rtern k\u00f6nnen problematisch sein (siehe Abbildung 2).<\/p>\n\n\n\n

\"\"\/
Abb. 2 – Trennzeichen wie \u201e\/“ zwischen zwei oder mehreren W\u00f6rtern verhindern oft einen Umbruch in der mobilen Ansicht.<\/em><\/figcaption><\/figure>\n\n\n\n

Die Trennzeichen in Abbildung 2 f\u00fchren dazu, dass der Beispieltext nicht umbricht, sondern einfach weiterl\u00e4uft. Wenn Sie jetzt jeweils vor und nach dem Trennzeichen ein Leerzeichen setzen, erkennt der Browser, dass der Inhalt umbrechen muss und der komplette Inhalt wird korrekt dargestellt (siehe Abbildung 3).<\/p>\n\n\n\n

\"\"\/
Abb. 3 – Setzen Sie zwischen Ihre Trennzeichen am besten Leerzeichen, um einen sinnvollen Umbruch in der mobilen Ansicht zu gew\u00e4hrleisten. <\/em><\/figcaption><\/figure>\n\n\n\n

2.) Verwenden Sie Soft-Hyphen<\/strong><\/p>\n\n\n\n

Bei Soft-Hyphen handelt es sich um bedingte Trennstriche. Diese m\u00fcssen manuell per HTML an die Stelle gesetzt werden, an der der Text im Browser umbrechen soll, wenn es n\u00f6tig wird. Verwenden k\u00f6nnen Sie daf\u00fcr eines dieser beiden Soft Hyphen:<\/p>\n\n\n\n

 &shy; oder &#173;<\/code><\/pre>\n\n\n\n
\"\"\/
Abb. 4 – Hier etwas \u00fcberspitzt dargestellt – aber gerade bei \u00dcberschriften kann es ohne automatische Silbentrennung schnell chaotisch und un\u00fcbersichtlich werden. Zudem setzt der Browser hier keinerlei Bindestriche. <\/em><\/figcaption><\/figure>\n\n\n\n
Platzieren Sie die Soft Hyphen im Quellcode genau an der Stelle, an der ein Umbruch sinnvoll sein k\u00f6nnte (siehe Abbildung 5). Im Browser erscheint dann sp\u00e4ter an dieser Stelle bei Bedarf ein Bindestrich.<\/p>\n\n\n\n
\"\"\/
Abb. 5 – \u00dcber das markierte Symbol rechts oben gelangen Sie in den Quellcode. Platzieren Sie hier Ihre Soft Hyphen.<\/em><\/figcaption><\/figure>\n\n\n\n
Sobald Sie nach dem Einsetzen und Speichern der Soft Hyphen in die visuelle Smartphone-Ansicht der Vorschau wechseln, werden die Umbr\u00fcche und Bindestriche sichtbar (siehe Abbildung 6). Mit dieser kleinen Erg\u00e4nzung haben Sie gleichzeitig f\u00fcr mehr \u00dcbersichtlichkeit im Text und einen angenehmeren Lesefluss gesorgt. <\/p>\n\n\n\n
\"\"\/
Abb. 6 – Dank der Soft Hyphen im Quellcode sind nun sinnvolle Umbr\u00fcche und Bindestriche im Browser sichtbar. <\/em><\/figcaption><\/figure>\n\n\n\n
Sie wollen das Design Ihres Fragebogens noch weiter anpassen? Dann greifen Sie auf CSS-Befehle zur\u00fcck. Wie das funktioniert, erfahren Sie in unserem Helpdesk: Design-Funktionen CSS-Befehle<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Sie haben Ihren Online-Fragebogen bei LamaPoll erstellt und checken im n\u00e4chsten Schritt vor Ver\u00f6ffentlichung die mobile Ansicht in der Vorschau. Je nachdem, welchen Browser Sie verwenden, kann es gerade bei l\u00e4ngeren W\u00f6rtern oder bei W\u00f6rtern mit Trennzeichen passieren, dass der Text von Fragen oder Antworten nicht umbricht, sondern \u00fcber den Bildschirmrand l\u00e4uft (siehe Abbildung 1). […]<\/p>\n","protected":false},"author":1,"featured_media":1434,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,156],"tags":[2239,2236],"class_list":["post-12055","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-feedbackmanagement","category-frage-der-woche","tag-bedingte-trennstriche","tag-silbentrennung-steuern"],"_links":{"self":[{"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/posts\/12055","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/comments?post=12055"}],"version-history":[{"count":21,"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/posts\/12055\/revisions"}],"predecessor-version":[{"id":12334,"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/posts\/12055\/revisions\/12334"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/media\/1434"}],"wp:attachment":[{"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/media?parent=12055"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/categories?post=12055"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lamapoll.de\/blog\/wp-json\/wp\/v2\/tags?post=12055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}