ul {
width: 50%;
display: -webkit-flex;
/* Safari */
display: flex;
flex-wrap: wrap;
align-content: stretch;
}
ul li {
max-width: 33%;
height: 30px;
padding: 5px 10px;
margin: 5px;
border: 1px solid #000;
white-space: nowrap;
/*规定文本不换行**/
text-overflow: ellipsis;
/**显示省略符号来代表被修剪的文本。*/
overflow: hidden;
}
标签排列内容不统一,一行显示不了就自动换行
于 2021-04-27 15:01:09 首次发布
这段代码展示了如何使用Flex布局来创建一个响应式的列表,列表项最大宽度为33%,并采用`flex-wrap`属性实现换行效果,同时通过`text-overflow`和`overflow`属性处理文本溢出,确保内容在有限的空间内展示。
摘要由CSDN通过智能技术生成