多个div自适应宽度并排显示 超出部分...
时间: 2023-07-06 18:39:21 浏览: 142
可以使用 CSS 中的 `flexbox` 布局来实现多个 div 自适应宽度并排显示,并且超出部分显示省略号。
CSS 代码如下:
```css
.container {
display: flex;
flex-wrap: wrap; /* 允许换行,以便实现自适应宽度 */
}
.child {
flex: 1; /* 自适应宽度 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
white-space: nowrap; /* 不换行 */
}
```
上面的代码中,`flex: 1` 可以让多个 `child` 元素自适应宽度,并且平分容器的宽度。`overflow: hidden` 可以让超出部分隐藏,`text-overflow: ellipsis` 可以让超出部分显示省略号,`white-space: nowrap` 则可以让内容不换行。
阅读全文