Bin gespannt! Ergibt halt Sinn, sich an den Altmeister zu wenden.
Das ist jetzt nicht so ganz einfach da die Vorschau auch BB-Codes anzeigt.
Wie wäre das:
So ok?
Bin gespannt! Ergibt halt Sinn, sich an den Altmeister zu wenden.
Das ist jetzt nicht so ganz einfach da die Vorschau auch BB-Codes anzeigt.
Wie wäre das:
So ok?
Das sieht gut aus, muss ich mal selbst probieren
Ich gucke mal drüber, bis da hin ändere diese Zeile ab:
-webkit-line-clamp: 1;
in 3 oder 4
Danke für den Tipp Tom und 2 habe ich gestern auch mal ausprobiert. Leider aber bringt das noch nicht die gewünschte Anzeige. Egal ob ich 2, 3 oder 4 angebe, es schaut immer so aus:
Im Text ist da aber keine Leerzeile Und die Punkte (...) werden auch nicht korrekt angezeigt.
Ok, muss ich dann selbst noch mal testen
Das sieht gut aus, muss ich mal selbst probieren
.boxContent .messageList.messageReducedList {
display: flex;
flex-wrap: wrap;
margin: -10px -10px;
> li {
margin: 10px;
flex-basis: calc(33.33% - 20px);
max-width: calc(33.33% - 20px);
border-radius: var(--wcfBorderRadius);
border: 0 solid var(--wcfContentBorderInner);
padding-bottom: 0;
border: 1px solid var(--wcfContentBorderInner);
.message {
height: 100%;
}
.messageReduced .messageTitle {
overflow: hidden;
text-overflow: ellipsis;
}
.messageReduced .messageTitle a {
white-space: nowrap;
}
.messageContent {
.messageHeader {
order: 3;
border-radius: 0 0 var(--wcfBorderRadius) var(--wcfBorderRadius);
margin-top: 20px;
border-top: 1px solid var(--wcfContentBorderInner);
background-color: rgba(0,0,0,0);
.messageHeaderMetaData > li:not(:nth-child(1)):not(:nth-child(2)) {
display: none;
}
.messageHeaderMetaData > li:not(:nth-child(1))::after {
content: "";
}
}
.messageBody {
order: 1;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 8;
}
.messageFooter {
display: none;
}
}
}
}
Alles anzeigen
Kurze Info: Wer so wie ich das originale Stildesign für die Blog Artikel Box haben möchte, nur eben zweispaltig und mit kürzerem Vorschautext (so wie bei der normalen Artikel Box), der kann diesen Code verwenden:
/* WoltLab Blog Artikel Box: Zweispalatig + 3 Zeilen Text als Vorschau */
#content {
.boxContent .blogEntryList {
display: flex;
@include screen-lg {
.contentItemSingleColumn {
flex-basis: calc(100% / 2 - 20px);
}
}
@include screen-sm-md {
.contentItemSingleColumn {
flex-basis: calc(50% - 20px);
}
}
@include screen-xs {
.contentItemSingleColumn {
flex-basis: calc(100% - 20px);
}
}
.contentItemDescription {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
}
}
Alles anzeigen