zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Automatischer Zeilenumbruch bei mobile Device

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.08.2018, 13:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.08.2018
Beiträge: 8
Cokolja befindet sich auf einem aufstrebenden Ast
Idee 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.08.2018, 13:51
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.857
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

nein, nicht so, wie du es dir vorstellst. Du kannst die Breite des Containers auf mobile verkleinern, so dass der Umbruch früher statt findet.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.08.2018, 14:02
Benutzer
neuer user
 
Registriert seit: 10.07.2018
Beiträge: 77
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

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:

Das ist auch unabhängig von der Art des Anzeigegerätes, es orientiert sich eigentlich nur am verfügbaren Platz.
Mit Zitat antworten
  #4 (permalink)  
Alt 29.08.2018, 13:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.08.2018
Beiträge: 8
Cokolja befindet sich auf einem aufstrebenden Ast
Standard

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.

Mit Zitat antworten
  #5 (permalink)  
Alt 29.08.2018, 13:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.08.2018
Beiträge: 8
Cokolja befindet sich auf einem aufstrebenden Ast
Standard

Momentan:
https://imageshack.com/a/img924/867/Sw100V.png

Gewollte Lösung:
https://imageshack.com/a/img921/571/6PrHBi.png
Mit Zitat antworten
  #6 (permalink)  
Alt 29.08.2018, 13:34
Benutzer
neuer user
 
Registriert seit: 10.07.2018
Beiträge: 77
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

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;
allerdings ohne das Leerzeichen hinter dem &.
Mit Zitat antworten
  #7 (permalink)  
Alt 29.08.2018, 13:49
Benutzer
neuer user
 
Registriert seit: 10.07.2018
Beiträge: 77
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
  #8 (permalink)  
Alt 29.08.2018, 14:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.08.2018
Beiträge: 8
Cokolja befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #9 (permalink)  
Alt 29.08.2018, 14:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.08.2018
Beiträge: 8
Cokolja befindet sich auf einem aufstrebenden Ast
Standard



Nun habe ich eine Lösung, diese ist aber leider nur statisch und hat keinen Bezug zur Displaygröße, denke die finale Lösung liegt ganz nah
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 29.08.2018, 15:10
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.857
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

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;}
}
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
html

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Im Mobile Device - Menu slided hinter dem Main Div leverkusenerjung CSS 2 06.07.2015 08:01
Automatischer Zeilenumbruch in einer Tabelle Seulaslintan CSS 2 04.12.2009 00:15
automatischer Zeilenumbruch im Echo p0mmeluff Serveradministration und serverseitige Scripte 3 07.07.2008 12:11
Automatischer Zeilenumbruch bei verschachtelten Containern Ste CSS 3 16.03.2008 22:39
Unterforen für mobile Geräte? Robin Fragen, Konstruktive Kritik, Lob / Bekanntmachungen 15 19.11.2007 16:34


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:32 Uhr.