|
|||
Automatischer Zeilenumbruch bei mobile Device
Grüß Gott,
habe mich aufgrund positiver Empfehlungen gerade hier angemeldet, da ich eine kleine Frage bezüglich einer Webshop-Optimierung habe. Ich habe eine Informationstext im Header eines Shops stehen, der bei mobilem Zugriff leider an einer sehr ungünstigen Stelle die Zeile umbricht. Gibt es eine einfachere Methode als ein isMobile-Script um den Zeilenumbruch bei mobilem Zugriff an einer ganz bestimmten Stelle zu tätigen? Besten Dank und liebe Grüße Kolja |
Sponsored Links |
|
|||
Schau doch mal, ob dir das hier weiterhilft:
https://wiki.selfhtml.org/wiki/HTML/Textauszeichnung/br Ich nutze gerne den Code für 'soft hyphen', wenn ich eine Umbruchstelle im Text bevorzugen will. PHP-Code:
|
|
|||
Vielen Dank, das sieht interessant aus. Es geht jedoch genau darum, dass die Zeile bei mobilen Geräten an einem bestimmten Punkt umgebrochen wird. Die "Lösung" hatte ich bereits einmal mit Javascript erreicht. Das führte aber zu dramatischen Bugs, wodurch Personen nicht mehr bestellen konnten. Daher suche ich nun eine möglichst leichtgewichtige HTML Lösung. Anbei einmal der optische Problemfall und einmal das gewollte Resultat.
|
|
|||
Momentan:
https://imageshack.com/a/img924/867/Sw100V.png Gewollte Lösung: https://imageshack.com/a/img921/571/6PrHBi.png |
|
|||
Dann teste doch mal, ob du damit deinem Ziel näher kommst..
ersetze alle Leerzeichen - bis auf das, bei dem der Umbruch erfolgen soll - durch ein 'non brakeable space'! https://de.wikipedia.org/wiki/Gesch%...es_Leerzeichen der HTML Code dafür lautet HTML-Code:
& nbsp; |
|
|||
Und wenn es gar nicht anders geht, dann schau dir 'white-space: nowrap;' an:
https://wiki.selfhtml.org/wiki/CSS/E...ng/white-space damit kannst du dir ein Konstrukt basteln - etwas so... HTML-Code:
<span style="white-space: nowrap;">Teil 1</span> <span style="white-space: nowrap;">Teil 2</span> |
|
|||
Vielen Dank, dein zweiter Lösungsansatz hat mich glaube ich in die richtige Richtung geführt. Ich werde es eventuell mit pre-wrap versuchen, da ich ja bei einger Größe unter der kleinsten Monitorgröße einen Umbruch für den zweiten Teil erzielen.
|
|
|||
Ansonsten mache einfach zwei spans, wobei du eines auf desktop und eines auf mobile anzeigst.
Bzw so Code:
<span>029840</span> <span class="newline">(mo-fr...)</span> @media (max-width: 500px) { .newline {display: block;} } |
Sponsored Links |
Stichwörter |
html |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Im Mobile Device - Menu slided hinter dem Main Div | leverkusenerjung | CSS | 2 | 06.07.2015 09:01 |
Automatischer Zeilenumbruch in einer Tabelle | Seulaslintan | CSS | 2 | 04.12.2009 01:15 |
automatischer Zeilenumbruch im Echo | p0mmeluff | Serveradministration und serverseitige Scripte | 3 | 07.07.2008 13:11 |
Automatischer Zeilenumbruch bei verschachtelten Containern | Ste | CSS | 3 | 16.03.2008 23:39 |
Unterforen für mobile Geräte? | Robin | Fragen, Konstruktive Kritik, Lob / Bekanntmachungen | 15 | 19.11.2007 17:34 |