• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Blocksatz für einzelnes Wort

mr.tino

mr.tino

Neues Mitglied
Hey Forum

sitze mal wieder an meinem tumblr code und beiße mir grade an etwas die Zähne aus. Finde einfach keine Erklärung im Netz.
Finde aber auch nicht dass das Problem so groß ist...

Also. Ich würde gerne ein Wort (Link) in der Gesamten Breite meiner div box laufen lassen. Wie es bei einem Blocksatz auch ist wenn ich mehrere Wörter habe. Habe mal ein Bild angehängt.

Links habe ich. Will es aber wie es Rechts dargestellt ist haben...

preview.jpg

Hier die besagte Website: TINO CRISÓ PHOTOGRAPHY

Danke schon mal für eure zeit und Hilfe!
Tino
 
Eine allgemeingültige Lösung ist mir nicht bekannt.
Folgende "Krücke" könnte helfen:
Gib jedem Wort entsprechend seiner Länge und der Breite der Box einen individuellen letter-spacing-Wert, z.B. so:
Code: 
<span style="letter-spacing: 15px;">Wort</span>
 
Habs grade mal probiert. Allerdings nicht genau das wonach ich suche :(
Ist zu ungenau wenn ich nur mit px-Werten arbeiten kann...
 
Alternativ geht auch Prozent, em, pt etc.pp. Wenn dir px nicht passt, versuch es mit Prozent, wobei die genaue Angabe wiederum von der Buchstabenanzahl abhängig ist. Ggfs. müsstest Du auch noch "display: block;" ergänzen damit das Wort wirklich alleine auf einer Zeile steht.
 
threadi schrieb:
Alternativ geht auch Prozent, em, pt etc.pp. Wenn dir px nicht passt, versuch es mit Prozent, wobei die genaue Angabe wiederum von der Buchstabenanzahl abhängig ist.
Zum Vergrößern anklicken....
Das können doch alles nur Zufallswerte sein. Abhängig von der Schrift, den verwendeten Buchstaben, dem System, dem Browser und der Browsereinstellung.
Ein Versuch mit justify könnte so aussehen:
Code: 
<!DOCTYPE html>  
<html lang="de">
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <style>
  html,body,p {
    margin: 0px;
    padding: 0px;
}

p {
line-height: 1em;
height: 1em;
width: 150px;
border: 1px solid black;
text-align: justify;
overflow: hidden; /* Nach einer Zeile abschneiden */
}

/* letzte Zeile erzwingen */
p:after {
display: inline-block;
content: "umbruch";
padding-right: 150px;
}

  </style>
  <title>justify</title>
 </head>
 <body>
<p>L o r e m</p>

 </body>
</html>
Im html müsste zwischen jedem Buchstaben ein Leerzeichen oder Zeilenumbruch stehen. Außerdem bräuchten ältere IEs ein echtes, letztes inline-Element in <p>
-Und je kürzer das Wort, desto hässlicher sieht es aus.

Und wehe das Wort passt nicht in eine Zeile.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben