Zeilenumbruch für separierte Buchstaben
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abstand
bau
buchstabe
container
einzelnen boxen
ermitteln
folgender url
idee
jemand
kreisen
problem
realisieren
schleife
setzen
sieben
test
text
url
wort
zeile
-
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 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
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 -
sonok schrieb:
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.
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.
Danke für die Hilfe! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
