Zwei Textzeilen mit exakt gleicher Länge?

käsespätzle

Hallo,

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

HTML

<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:

HTML

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

Code

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

Grevas

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

<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/topic/o…gn/#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/questions/5976…168507#23168507

käsespätzle

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!

käsespätzle

Hallo nochmal,

ich habe jetzt Folgendes gemacht:

HTML

<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;
}

Alles anzeigen

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!

Grevas

Ich habe befürchtet das du dich für den flex-missbrauch entscheidest. Na jeder darf selbst, freies Land und so

käsespätzle

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

Tags