Zwei Textzeilen mit exakt gleicher Länge?

  • Hallo,


    ich möchte erreichen, dass zwei Textzeilen exakt die gleiche Länge aufweisen.
    BEISPIEL:


    HTML
    1. <p>
    2. Bespieltext oben<br>
    3. Bespieltext unten
    4. </p>


    Bespieltext oben
    Bespieltext unten


    Ziel ist also, dass der jeweils erste Buchstabe ("B") und letzte Buchstabe ("n") der Zeilen genau übereinander stehen.


    In der unteren Zeile habe ich aber mehr Buchstaben, sodass diese Zeile erstmal länger ist als die obere.


    Meine bisherige Lösungskrücke sieht so aus, dass ich die ersten Zeile per "letter-spacing" so in die Länge ziehe, bis es halbwegs passt:


    HTML
    1. <p>
    2. <span id="breit-text">Bespieltext oben</span><br>
    3. Bespieltext unten
    4. </p>


    Code
    1. #breit-text {letter-spacing: 0.123em;}


    Bei einer anderen Schriftart aber z.B. passt das dann nicht mehr und die beiden Zeilen sind wieder (wenn auch nur geringfügig) unterschiedlich lang.


    Gibt es in CSS die Möglichkeit, die kürzere Zeile automatisch so zu "dehnen", dass sie genausolang ist wie die längere Zeile?
    Dankeschön!

  • text-align: justify;
    https://www.w3schools.com/cssref/pr_text_text-align.asp

    Dynamisches letter spacing gibt es afaik nicht

    Wenns wirklich einzeiler sein müßen die bündig abschließen, gibt's hier so ein Hack:

    HTML
    1. <p id="foo"> <span id="breit-text">Bespieltext oben<br></span> Bespieltext unten</p><style>#foo { height: 1.5em; line-height: 1.5em; text-align: justify; text-align-last: justify; }#foo:after { content: ''; display: inline-block; width: 100%;}</style>


    //P.S. Quelle: https://css-tricks.com/forums/…-text-design/#post-133507


    das mit "hack" mein ich ernst, mir ist noch kein Designer angekommen der so was wirklich wollte & z.B. Safari auf'm Mac unterstützt das nicht: https://caniuse.com/#feat=css-text-align-last ; aber ist ja letztendlich eine Kleinigikeit. Sprich: besser so eine Anforderung meiden wenn möglich.


    Wenn's WIRKLICH verdammt wichtig ist, geht's mit Javascript, hier (da wirds aber so langsam kompliziert :p):
    https://stackoverflow.com/ques…-of-div/23168507#23168507

  • Hallo Grevas,


    super, Danke für die Hinweise!


    Da ggf. auch nur ein einzelnes Wort in einer Zeile vorkommt, führt "text-align" bei mir nicht zum Ziel.


    Und der "hack" von css-tricks.com wird ja leider nicht breit unterstützt.


    Die Sache ist nicht "verdammt wichtig"daher möchte ich mich jetzt nicht in Javascript reinfuchsen.


    Aber der Link https://stackoverflow.com/questions/...68507#23168507 enthält viele neue Ansätze für mich, da werde ich mich jetzt durchwühlen.
    Guter Tipp, Dankeschön!
    :-)

  • Hallo nochmal,


    ich habe jetzt Folgendes gemacht:



    Das ist jetzt ein ziemlich ver"div"tes Gebastel, macht aber genau das, was ich wollte.


    Mein Problem ist damit gelöst, vielen Dank nochmal für den Link auf https://stackoverflow.com/questions/...68507#23168507!


    :groesste