Problem mit der Enhanced category-box display theme Komponente

[Julie_Thézénas (Julie tzns)]

Hallo zusammen,

ich habe versucht, den Code “Enhanced category” zu verwenden, aber wie Sie sehen können (Bild A), überschneidet sich der Text. Ich habe im SCSS versucht, die Option zu setzen:

white-space: revert;
und gelöscht
white-space: nowrap;

Wenn ich white-space: revert; verwende, wird der Text zu einer Spalte (Bild B).

Der ursprüngliche Code unten

Enhanced category-box display component

discourse-theme-category-homepage I’ve worked quite a lot on a new category-box homepage for my community’s forum. It’s quite specific for our needs and then may not be useful for a lot of people, but one might take ideas from it. After/Before [category-homepage] [initial-category-box] Our specific usecase We have a community that deal with a lot of broad topics. We federate local NGOs that have their own members, and we do have autonomous groups, each of them are performing one or multiple …

---

Hallo zusammen!

Ich habe versucht, den Code “Enhanced category” zu übernehmen, aber ich habe einen Fehler (Bild A) mit dem Text, der sich überlappt. Im SCSS habe ich gesetzt:
white-space: revert;
und entfernt:
white-space: nowrap;
da letzteres dazu führte, dass sich der Text überlappte. Wenn ich revert anwende, kann man einen Unterschied sehen (Bild B).

Hattet ihr dieses Problem mit dem Code?

Vielen Dank im Voraus.

Der ursprüngliche Code
Enhanced category-box display component

A

B

TEST:

.categories-and-latest {
flex-direction: column;
}

.category-list {
thead,
.topics,
.category-description {
display: none;
}

// .title, .featured-topic {
// overflow: hidden;
// text-overflow: ellipsis;
// flex: 0 1 auto;
// white-space: revert;
// }

@mixin ellipsis {
overflow: hidden;
text-overflow: ellipsis;
flex: 0 1 auto;
white-space: revert;
}

tbody {
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;

tr {
display: inline-block;
width: 250px;
min-height: 250px;
margin: 0.75em;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
border-left-color: transparent;
margin-block: 70px;

}

.category {
padding: 1.25em 0;
border-width: 0;
display: block;
width: 100%;
height: calc(100% - 2.5em);
position: relative;
background: #f2f2f2;
display: flex;
flex-direction: colum;
flex-wrap: wrap;
align-items: center;
.category-logo {
float: unset;
margin: 0 auto;
}


h3 {
a[href] {
display: flex;
flex-direction: column;
width: 250px;
order: 1;
.category-text-title {
justify-content: center;
}
}
}

:after {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: "";
z-index: 1;
box-sizing: border-box;
pointer-events: none;
border-left: 6px solid;
opacity: 0.35;
border-color: inherit;
}

.subcategories {
.category-name {
margin-top: 0;
}
.badge-notification {
display: none;
}

}
}
}
}