Enhanced category-box display theme 组件显示问题

[Julie_Thézénas (Julie tzns)]

大家好，

我尝试使用这个代码，但正如你所见（屏幕 A），框下方的文本出现了重叠。我尝试在 SCSS 中设置：

white-space: revert;
并删除
white-space: nowrap;

当我使用 white-space: revert; 时，文本会变成一列（屏幕 B）。

初始代码如下：

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 …

---

大家好！

我尝试使用了“Enhanced category”代码，但遇到了一个 bug（图 A），文本出现了重叠。在 SCSS 中，我设置了
white-space: revert;
并删除了
white-space: nowrap;
因为后者会导致文本重叠。应用 revert 后，可以看到区别（图 B）。

你们在使用这段代码时遇到过这个问题吗？

提前感谢！

初始代码
Enhanced category-box display component

A

B

测试：

.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;
                }

            }
		}
	}
}