.my-dynamic-list {
display: flex;
flex-wrap: wrap; /* 自动换行 */
gap: 10px; /* 列和行的间距 */
width: 100%; /* 父容器占满宽度 */
}
.my-dynamic-list[data-columns="2"] .dynamic-content-placeholder > * {
width: calc(50% - 10px); /* 两列布局 */
}
.my-dynamic-list[data-columns="3"] .dynamic-content-placeholder > * {
width: calc(33.333% - 10px); /* 三列布局 */
}
.my-dynamic-list[data-columns="4"] .dynamic-content-placeholder > * {
width: calc(25% - 10px); /* 四列布局 */
}
.dynamic-content-placeholder a {
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出部分用省略号表示 */
text-decoration: none; /* 去掉下划线 */
color: #000; /* 默认文字颜色 */
display: inline-block; /* 确保布局正常 */
}
.dynamic-content-placeholder a:hover {
color: #007BFF; /* 鼠标悬停时文字颜色 */
text-decoration: underline; /* 鼠标悬停时显示下划线 */
}