Zwei Textzeilen mit exakt gleicher Länge?

Hallo,

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

<p>
Bespieltext oben<br>
Bespieltext unten
</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:

<p>
<span id="breit-text">Bespieltext oben</span><br>
Bespieltext unten
</p>

#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!

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:

<div id="foo">


    <div id="z1">
    <div>B</div>
    <div>S</div>
    <div>P</div>
    <div>.</div>
    <div>o</div>
    <div>b</div>
    <div>e</div>
    <div>n</div>
    </div>

    <div id="z2">
    <div>B</div>
    <div>S</div>
    <div>P</div>
    <div>.</div>
    <div>u</div>
    <div>n</div>
    <div>t</div>
    <div>e</div>
    <div>n</div>
    </div>

</div>


<style>
#foo {  
    width: 11em;
}


#z1, #z2 {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
}

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!

solange flex-missbrauch noch legal ist, wollte ich das mal ausprobieren...