Textumbruch füllen-letzte-Zeile-zuerst

Ich habe ein besonderes Design für eine Webseite, das ich aus einem bereits erstellten Design implementieren muss, und einige der Textumbrüche werden von unten nach oben gefüllt (in meinem Fall ist es für unten links ausgerichteten dünnen Text in farbigen quadratischen Kacheln, sieht besser aus als es klingt). Das heißt, in einem Textblock, der mehrere Zeilen umbricht, wird die unterste Zeile zuerst (horizontal) gefüllt, sodass nach dem Umbruch jeder verbleibende horizontale Platz für die erste Zeile verbleibt.

Ist dies eine bekannte Art des Textumbruchs und wie könnte ich ihn in einer Webseite implementieren, ohne manuell Zeilenumbrüche im Quelltext hinzuzufügen? Oder könnten Sie dieses "Feature" zumindest benennen, damit ich es googeln kann?

Bearbeiten: Wenn beispielsweise im Text "Here be the link" nicht genügend Platz in einer Zeile vorhanden ist, sollte die Zeile als "Here \n be the link" anstelle des Standards "Hier be the \n link" gerendert werden. , wobei "\n" ein Zeilenumbruch ist.

Könntest du ein Bild hinzufügen? Ich kann mir nicht vorstellen, dass es gut aussieht.

Antworten (2)

Der Effekt, von dem Sie sprechen, heißt Vertikale Ausrichtung , in diesem Fall untere vertikale Ausrichtung. In Designanwendungen wie InDesign (aber nicht Illustrator ohne Hacken , stöhnen, weinen, stöhnen ... ) gibt es dafür eine einfache Schaltfläche.

In HTML/CSS ist die vertikale Ausrichtung nicht so einfach . Die vertikale Ausrichtung für eine Tabellenzelle ist einfach, vertical-align: bottom;der Text beginnt unten, wie Sie ihn beschreiben, aber außerhalb von Tabellenzellen bezieht sich die vertikale Ausrichtung darauf, wie Bilder und andere Inline-Elemente mit Höhe an jedem Textblock ausgerichtet werden.

Sie können jedoch ein HTML-Div (oder ein beliebiges Blockelement) dazu zwingen, eine vertikale Ausrichtung zu haben, indem Sie ihm sagen, dass es mit der CSS-Regel so tun soll, als wäre es eine Tabellenzelle display: table-cell;(ich habe Leute gesehen, die sagen, es muss etwas sein, das vorgibt, eine Tabelle zu sein, oder dass dies irgendwie 'schlechte Praxis' ist - sie haben es mit normalen HTML-Tabellen verwechselt, so ist es in Ordnung). Dann können Sie die CSS-Regel hinzufügen vertical-align: bottom;und es wird funktionieren.

Leider benötigen Sie eine Problemumgehung, damit dies in alten Versionen des Internet Explorers funktioniert, die ignorieren display: table-cell;, und es kann schwierig sein, dies zum Laufen zu bringen, wenn CSS floats beteiligt sind, was häufig für Felder in einer Zeile oder in Spalten verwendet wird ( table-cells nicht float) - ein Raster aus Kacheln, wie in der Frage beschrieben, wird mit ziemlicher Sicherheit float.

Hier ist ein abgespecktes Live-bearbeitbares Beispiel auf der Website JSbin , das zeigt, wie es überall funktioniert, einschließlich alter Versionen von IE, einschließlich in schwebenden Kacheln. Klicken Sie auf die Schaltfläche „In JSbin bearbeiten“, um den Code anzuzeigen und damit herumzuspielen: Es gibt viele Codekommentare, die erklären, was wichtig und was optional ist.

Das Grundprinzip: Verwenden Sie Wrapper und einen Fallback-Trick für Internet Explorer mit position: absolute;Wrapper und position: relative;Inhalt.

(Das zufällige graue Kästchen ist IE7, das die JSbin-Bearbeitungsschaltfläche vermasselt ...)

Geben Sie hier die Bildbeschreibung ein

Das einfachste Beispiel für die untere Ausrichtung, die im alten IE funktioniert, ist dieser HTML-Code:

<!--[if lte IE 7]><div class="old-ie"><![endif]-->

<div class="bottom wrapper">
<div class="content">
 This text is bottom aligned
</div>
</div>

<div class="middle wrapper">
<div class="content">
 This text is bottom aligned
</div>
</div>

<!--[if lte IE 7]></div><![endif]-->

...und dieses CSS:

/* for normal browsers... 
*******************/

.content {
    display: table-cell;
    height: 200px;
}
.bottom .content {
    vertical-align: bottom;
}
.middle .content {
    vertical-align: middle;
}

/* make it more-or-less work in IE6, IE7 
*******************/

.old-ie {
    position: relative;
}
.old-ie .wrapper {
    position: absolute;
}
.old-ie .content {
    position: relative;
}
.old-ie .bottom .wrapper, .old-ie .bottom .content {
    bottom: 0;
}
.old-ie .middle .wrapper {
    top: 50%;
}
.old-ie .middle .content {
    top: -50%;
}

Schließlich ist hier ein Link zu einer StackOverflow-Antwort (Kodierungs-Q&A-Site), die ich vor einiger Zeit geschrieben habe und die bei Bedarf etwas detaillierter erklärt, wie man vertical-alignbrowserübergreifend mit Gleitkommazahlen (wahrscheinlich der schwierigste Fall) arbeitet und was die Einschränkungen sind.

Zunächst einmal vielen Dank, dass Sie sich die Zeit genommen haben, dies aufzuschreiben, aber ich fürchte, Sie haben mich missverstanden (oder wahrscheinlicher, ich habe es in der Frage schlecht erklärt). Es geht nicht um eine untere vertikale Ausrichtung, sondern um die "Form" des umbrochenen Textes. Wenn beispielsweise im Text „Hier ist der Link“ nicht genügend Platz in einer Zeile vorhanden ist, sollte die Zeile als „Hier \n ist der Link“ statt als Standard „Hier ist der \n Link“ gerendert werden.
Stimmt, war nicht klar. Das ist viel schwieriger, wenn es einen Namen hat, davon habe ich noch nie gehört - die Leute nehmen wahrscheinlich an, dass die unerwartete Pause etwas im Text bedeutet, wie eine Pause. Für das Web müssen Sie zuerst vertikal nach unten ausrichten, dann benötigen Sie etwas Javascript, das den Text analysiert und berechnet, wo ein Zeilenumbruch platziert werden soll. Das ist ein kniffliges Programmierproblem und Sie sollten wahrscheinlich die Programmierer zum Stapelüberlauf fragen. Ich denke, der beste Weg wäre, ein visibility: hidden;Wort nach dem anderen von hinten nach vorne zu erstellen und die Breite gegen den Raum zu testen.
Ps, wenn der Zweck darin besteht, einen Titel zu vermeiden, können Sie nicht einfach den Titel float: left;oder direkt in die Kachel einfügen? Dies würde dazu führen, dass der Text der Hauptkachel um den Titel herumfließt, und könnte eine konventionellere Art sein, die Dinge zum Laufen zu bringen. Konventionell ist normalerweise gut in der Typografie, denn wenn ein Leser abgelenkt ist, um ein ungewöhnliches Layout zu finden, schenkt er dem Inhalt weniger Aufmerksamkeit.
Ich stimme voll und ganz zu, aber es ist nicht wirklich meine Wahl, der hauseigene Designer des Kunden hat das Design gemacht und ich soll es umsetzen ... :(
Vielleicht könnte ich serverseitig Kacheln mit Bitmap-Hintergründen erstellen und die Kacheln neu erstellen, wenn sich der Kacheltext im CMS ändert. Es sollte einfacher sein, serverseitig zu arbeiten, da ich anstelle von JS echte Grafikbibliotheken verwenden könnte. Und mit Bild-Caching sollte es schnell sein, aber es wäre immer noch bildlastig. Oder ich könnte versuchen, den Kunden davon zu überzeugen, diese neuartige Textverpackung aufzugeben :)
Du hast mein Mitgefühl! Wenn diese Art der Ausrichtung existieren würde, würde sie als "top ragged" bezeichnet werden, stelle ich mir vor (die zackige Seite in der typografischen Ausrichtung ist die unebene Seite).
Das einzige, was mir einfällt, ist vertikal ausgerichteter Text - das ist wie das, was Sie sagen, aber ohne die zerlumpte Oberseite. Wahrscheinlich sehr schwer für das Web, dieser Link könnte helfen stackoverflow.com/questions/9188969/… es ist wirklich ein Programmierproblem
Das Schlimmste ist, dass das Design gar nicht mal so schlecht aussieht. Der Text ist in der Kachel unten ausgerichtet und hat normalerweise etwa 3 Textzeilen, und wenn diese letzte Zeile bis zum Ende gefüllt ist, sieht es irgendwie besser aus als mit normalem Umbruch, der eine Lücke im unteren rechten Teil der Kachel hinterlässt

Ich bin mir nicht sicher, ob dies die richtige Seite ist, um diese Frage zu stellen, aber hier ist ein Beispiel dafür, was Sie brauchen (für IE, funktioniert in 8 und höher):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.tile {width:200px; height:100px; background-color:#FFFF00; vertical-align:bottom; display:table-cell;}
</style>
</head>
<body>
<div class="tile">123</div>
</body>
</html>

Beachten Sie das vertical-align:bottom;und display:table-cell;im Stil und spielen Sie ruhig mit Schriftarten, Rändern usw.

Textumbruch füllen-letzte-Zeile-zuerst
AntwortenHierDatenschutz-Bestimmungen1y, 0v