/* 容器样式,设置为两列布局 */
.dynamic-list-container {
display: flex;
flex-wrap: wrap; /* 自动换行 */
gap: 10px; /* 列间距 */
width: 100%; /* 宽度占满父容器 */
}
/* 每个链接的样式 */
.dynamic-list-container a {
flex: 0 0 calc(50% - 10px); /* 每行占 50% 的宽度,减去间距 */
text-decoration: none; /* 去掉链接的下划线 */
color: #000; /* 链接默认文字颜色 */
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出部分用省略号表示 */
}
/* 鼠标悬停时的样式 */
.dynamic-list-container a:hover {
color: #007BFF; /* 鼠标悬停时的颜色 */
text-decoration: underline; /* 鼠标悬停时显示下划线 */
}
/* 去除 <a> 标签之间的分隔符(如顿号和零宽度空格) */
.dynamic-list-container p {
display: flex; /* 将 <p> 转化为 flex 容器 */
flex-wrap: wrap; /* 自动换行 */
margin: 0; /* 移除默认的 <p> 的外边距 */
gap: 0; /* 去掉 <a> 标签之间的间距 */
}
.dynamic-list-container p #text {
content: "";
}
.dynamic-list-container p::before,
.dynamic-list-container p::after {
content: ""; /* 移除 <p> 的前后内容 */
}
.dynamic-list-container p a {
margin: 0; /* 去掉 <a> 标签的默认外边距 */
}
/* 去除 <a> 标签之间的字符 */
.dynamic-list-container p a + a::before {
content: ""; /* 清空顿号 "、" 或其他分隔符 */
}