kostenloser Webspace werbefrei: lima-city


Zeilenumbruch in einem <select>

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    na-web

    na-web hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. 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>
  4. h***********r

    Für Zeilenumbrüche wird oft ein </br> verwendet.

    Beitrag zuletzt geändert: 22.12.2017 19:44:58 von horstexplorer
  5. Autor dieses Themas

    na-web

    na-web hat kostenlosen Webspace.

    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.
  6. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    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/
  7. fussballturnier

    fussballturnier hat kostenlosen Webspace.

    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.
  8. h***********r

    An sich ist oder scheint automatisches Umbrechen möglich zu sein, mehr davon gibts hier:
    https://wiki.selfhtml.org/wiki/Zeilenumbruch
  9. fussballturnier

    fussballturnier hat kostenlosen Webspace.

    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

    <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>
    Mal als Beispiel zum herumspielen.

    Die CSS Varianten habe ich jetzt keine Lust zu testen.
  10. 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>

  11. Hallo na-web,

    versuch mal mit CSS zu arbeiten und dann nutze die Möglichkeit, die Textlänge automatisch zu ermitteln, somit kannst du auf dem Smartphone auch sicher stellen, dass die Breite des Screens nicht überschritten wird, egal ob Horizontal oder vertikal dargestellt.
  12. Autor dieses Themas

    na-web

    na-web hat kostenlosen Webspace.

    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
    overflow: auto;
    nützt leider nichts.
  13. h***********r

    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
  14. Autor dieses Themas

    na-web

    na-web hat kostenlosen Webspace.

    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?
  15. 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!
  16. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!