kostenloser Webspace werbefrei: lima-city


Zeilenumbruch für separierte Buchstaben

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    c143

    c143 hat kostenlosen Webspace.

    Hallo zusammen

    Ich will einen Text so gestalten, dass sich jeder Buchstaben in einem Kreis befindet. Ich generiere mit JavaScript also ein <div> für jeder Wort mit jeweils einem <span> für jeden Buchstaben. Ich baue dies auch so auf, weil ich später einen EventListener für jeden Buchstaben haben will.

    Jetzt stosse ich aber auf das Problem, dass ich auch gerne Abstände hätte, aber eben nur, wo benötigt. Bei einem Zeilenumbruch brauche ich keinen.

    Als Beispiel dafür: https://jsfiddle.net/arnahh2g/

    Zwischen den Wörtern „Test“ und „für“ sollte sich ein Abstand befinden. Da das Wort „Text“ auf einer neuen Zeile steht, darf da kein abstand sein.

    Ein anderer Fall ist aber folgender: https://jsfiddle.net/arnahh2g/1/

    Mit einem Abstand zwischen „Test“ und „für“ ist die Zeile zu kurz. „Für“ springt also auf die nächste Zeile und es wird ein Abstand zwischen „für“ und „Tex“ benötigt.

    Der Wunsch wär schlussendlich, dass die Zeilen auch immer mittig positioniert sind.
    Falls jemand eine Idee hat, wie man das ganze auch anders aufbauen könnte, bin ich auch offen dafür.

    Beitrag zuletzt geändert: 21.11.2016 15:54:12 von c143
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

  3. sonok

    Moderator Kostenloser Webspace von sonok

    sonok hat kostenlosen Webspace.

    Naja, an sich sollte doch die Breite des Darstellungsbereiches und die Breite der einzelnen Boxen bekannt sein bzw zu ermitteln sein. Daher würde ich die Springlänge ermitteln und immer anneinanderadiieren. Wenn ein Wort dann am Ende zu lang wird, kann dieses auf die nächste Zeile gepackt werden und der "Space"-Abstand entfallen.

    Zb: "ich bin dick und rund"
    Breite pro Buchstabe: 20px (festgelegt)
    Breite Bildschirm: 227px (ermittelt via JS)
    Breite zwischen den Worten: 5px (festgelegt)

    -> 60px + 5px + 60px + 5px + 80px + 5px + 60px + 5px + 80px
    -> zeile1(60px / 65px / 125px / 130 px / 210px / 215px) + zeile2(60px + 5px + 80px)
    -> zeile1(60px / 65px / 125px / 130 px / 210px) + zeile2(60px + 5px + 80px)
    -> zeile1(ich bin dick) + zeile2(und rund).

    Insgesamt läd also die Seite und der Text wird dann mit JS dynamisch geschrieben.
    Das alles mittig zu setzen würde ich denn einfach mit flex realisieren.

    Naja, ich hoffe das hilft, wenn ich das Problem denn richtig verstanden habe :D
  4. Autor dieses Themas

    c143

    c143 hat kostenlosen Webspace.

    sonok schrieb:
    Naja, an sich sollte doch die Breite des Darstellungsbereiches und die Breite der einzelnen Boxen bekannt sein bzw zu ermitteln sein. Daher würde ich die Springlänge ermitteln und immer anneinanderadiieren.
    Hatte eine ähnliche Idee. Da die Breite der Buchstaben und des Containers eh immer gleich bleibt, weiss ich, dass sieben Buchstaben platz haben. Dann habe in einer Schleife analysiert, wann ein Zeilenumbruch benötigt wird und den Array neu sortiert.

    Danke für die Hilfe!
  5. Hier eine geänderte Version:

    https://jsfiddle.net/arnahh2g/4/
  6. 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!