标签排列内容不统一，一行显示不了就自动换行

原创已于 2023-03-07 17:45:42 修改 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

于 2021-04-27 15:01:09 首次发布

css 专栏收录该内容

29 篇文章

订阅专栏

这段代码展示了如何使用Flex布局来创建一个响应式的列表，列表项最大宽度为33%，并采用`flex-wrap`属性实现换行效果，同时通过`text-overflow`和`overflow`属性处理文本溢出，确保内容在有限的空间内展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 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;

    }