Zeilenumbruch in einem <select>
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
auto
button
code
eigenschaft
ermitteln
formular
forum
frage
helfen
idee
klappen
nutz
objekt
problem
testen
umbruch
url
verhindern
weben
zeile
-
Liebe Community.
Es tut mir leid, dass ich euch schon wieder stören muss. Aber mir ist gerade noch eine Frage im Bezug auf die mobile Ansicht eingefallen. Ich habe ein Auswahlfeld (<select>) und einen Button (<input type="button"...). Beide enthalten einen Text. In der Desktop-Ansicht gibt es keine Probleme und alles sieht gut aus. Wenn man die Seite jedoch bspw. auf einem Smartphone ansieht ist der Text zu lang. Der ganze Rand der Seite wird also nach rechts verschoben, die Seite wird also breiter als gedacht und weil der Browser dies nicht mit zurückzoomen ausgleicht ist dann ein Teil des Texts verdeckt und man muss nach rechts scrollen. Zurückzoomen wäre auch keine Alternative, weil dann der ganze Rest kleiner wird, was auch doof ist. Ausserdem habe ich einen guten Hintergrund, weil der Button und das Auswahlfeld aber nun weiter nach rechts gehen als geplant, gehen Sie über den Hintergrund, was auch doof aussieht. Ich hab' schon gegoogelt aber nichts gefunden. Es wäre also wie ein Zeilenumbruch im Auswahlfeld oder Button, was ich bräuchte. Wisst ihr was man da machen kann?
Beitrag zuletzt geändert: 22.12.2017 18:25:31 von na-web -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo,
für einen Zeilenumbruch in einem <select> kenne ich keine Lösung. Für einen zweizeilegen Button funktionieren bei mit diese beiden Lösungen:
<input type="button" value="erste Zeile des Buttons und hier die zweite">
<button>erste Zeile des Buttons <div>...und hier die zweite</div> </button> -
Für Zeilenumbrüche wird oft ein </br> verwendet.
Beitrag zuletzt geändert: 22.12.2017 19:44:58 von horstexplorer -
Sorry, dass ich mich nicht so klar ausgedrückt habe. Ich werde es erst einmal so versuchen, wie Ihr es beschrieben habt. Aber eigentlich war die Idee, dass ein Zeilenumbruch automatisch eingefügt wird, wenn die Zeile zu Ende ist. Also wie bei einem normalen Text. Dies funktioniert ja bisher nicht und ich bin mir auch nicht sicher ob das überhaupt geht. Ich hoffe Ihr könt mir noch einmal helfen.
-
Leider hast du keinen Link zu deinem Projekt und ich bin zu faul, mir ein entsprechendes Formular zusammen zu bauen. Testen würde ich ob
-moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;
sich im Formularfeld auswirken.
Ziemlich häufig kommt außerdem beim responsiven Design, z.B. wenn es um breite Tabellen geht,
overflow: auto;
zum Einsatz, so dass man, falls notwendig nur das Formular seitlich scrollt.
Möglicherweise musst aber auch noch mal die komplette Formulargestaltung überdenken. Ein paar nette Anregungen zum responsiven Formulardesign gibt es hier:
https://www.mediaevent.de/responsive-formulare/ -
Also ich glaube auch nicht das es funktioniert.
https://www.tutorials.de/threads/zeilenumbruch-in-selectbox.207941/
https://www.php.de/forum/webentwicklung/html-usability-und-barrierefreiheit/54920-erledigt-zeilenumbruch-in-lt-select-gt
beide Foren sagen es ist nicht möglich. Habe selbiges Problem, aber ich lebe nun damit. Es lässt sich in meinem Fall einfach nicht verhindern. -
An sich ist oder scheint automatisches Umbrechen möglich zu sein, mehr davon gibts hier:
https://wiki.selfhtml.org/wiki/Zeilenumbruch -
horstexplorer schrieb:
An sich ist oder scheint automatisches Umbrechen möglich zu sein, mehr davon gibts hier:
https://wiki.selfhtml.org/wiki/Zeilenumbruch
Die ersten beiden Varianten funktionieren schonmal gar nicht. In dem Beitrag geht es auch um Text auf einer Seite und nicht explizit in einem Select Tag
Mal als Beispiel zum herumspielen.<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opellllllllllll<code><wbr></code>llllllllllllllllllll</option> <option value="audi">Audiiiiiiiiii<br>iiiiiiiiiiiiiiiiiiiiiiiiiiiiii</option> </select>
Die CSS Varianten habe ich jetzt keine Lust zu testen. -
Also bei der <button>-Variante funktioniert der automatische Zeilenumbruch:
<button>Blah blah blah blah blah blah blah blah blah</button>
Je nach Seitenbreite wird automatisch umgebrochen. Falls du noch weitere Styles definiert hast, die evtl. einen Umbruch verhindern, kannst du noch folgendes ergänzen:
<button style="overflow:auto">Blah blah blah blah blah blah blah blah blah</button>
-
Sorry, dass verstehe ich jetzt nicht genau. Falls es hilft, das Problem ist besonders deutlich zu sehen auf dieser Seite: https://wissen-bedeutet-macht.de.cool/quiz-griechische-goetter.php. Das mit
nützt leider nichts.overflow: auto; -
overflow regelt ja auch nicht Textumbrüche ;D
Es regelt die Größe und das Verhalten von Objekten größer als der Viewport.
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/overflow
Beitrag zuletzt geändert: 27.12.2017 14:06:29 von horstexplorer -
Danke, dass war wirklich sehr hilfreich. Ich hatte mir schon gedacht, dass das nicht klappt habe es aber trotzdem versucht. Vielleicht gibt es auch gar keine Lösung, aber fragen kann man ja mal. Hat denn keiner eine Idee wie es klappen könnte?
-
Hi,
bevor ich es erklär, schau dir das an, das sollte dir helfen:
https://www.w3schools.com/css/css_max-width.asp
Auf der Seite schaue ich auch nach, wenn ich mal etwas nicht sofort griffbereit habe! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage