Zeichenanzahl einer Artikelüberschrift vorgeben

[LenaMaurer]

Hallo, um ein Layout nicht zu zerstören - hätte ich gerne vorgegeben wie viele Zeichen lang eine Artikel Überschrift h5 zum Beispiel sein darf ..
Ist das möglich??


Danke!

[derRenner]

Hallo,

https://developer.mozilla.org/en-US/.../text-overflow
text-overflow: ellipsis;

[mlweb]

text-overflow: ellipsis;

Ich halte so etwas bei Überschriften eigentlich nicht für sinnvoll. Bei Teaser-Texten finde ich es ok.

Wenn man das beschränken will, dann müsste man m.E. die Eingabe der Anzahl der Textzeichen schon im Backend beschränken. Das halte ich für das Überschriftenfeld für machbar. Aber man kann ja auch Überschriften im TinyMCE setzen und dort lässt sich die Länge dann nicht steuern. Dann müsste man die Eingabe von Überschriften im Tiny komplett verbieten.

Insgesamt tendiere ich aber eher zu einer Lösung, die dafür sorgt, dass das Layout auch mit langen Überschriften zurecht kommt.
Alles andere ist in meinen Augen eher Murks.

Hast Du ein Beispiel bei dem man sehen kann, warum das nicht über ein entsprechendes Anpassungen des Layouts steuerbar ist?

[LenaMaurer]

Auf den Fotos sieht man - ich hab normalerweise 4 Fotos nebeneinander und oben eine kurze Überschrift. Aber mein Kunde hätte jetzt teilweise längere Texte eingegeben und dadurch verschiebt sich alles. Darum hätte ich gerne die Überschrift begrenzt:
Bildschirmfoto 2023-08-28 um 20.15.22.png
Bildschirmfoto 2023-08-28 um 20.16.03.png

[tschero]

Moin,

könnte Dein Kunde evtl.mit den kurzen Überschriften und einer kleinen Beschreibung unter den Bildern leben?
Dann hätte er mehr Platz für Informationen.

Mann müsste dann nur schauen, wie viel Zeichen man dem Kunden dafür zur Verfügung stellt, um nicht ggf Absätze in den Bildern zu haben.

Nur mal so als recht einfach umzusetzenden Lösungsvorschlag.

Grüße

[mlweb]

Ich würde es mit Flexbox lösen und einen Zeilenumbruch in der Überschrift zulassen.
Hab da mal ein kurzes Beispiel zusammengebaut. Natürlich nicht vollständig responsive ausgearbeitet.
Im Moment hier zu sehen https://c413.ml-webseiten.de/
Ist meine Spielwiese. Der Link ist also so nicht dauerhaft gültig.
Sicher brauchst Du auch zusätzliche Klassen, weil Du ja z.B. nicht jeden Artikel so gestalten möchtest.
Hier das wesentliche CSS dafür.

.mod_article {
    display: flex;
    gap: 1rem;
}
.ce_image {
    flex: 0 1 25%;
    display: flex;
    flex-flow: column;
}
img {
    display: block;
    width: auto;
    max-width: 100%;
}
.image_container {
    margin-top: auto;
}