css flex省略号 |css文件里如何添加图片不显示不出来

/* 省略号的CSS样式 */
.ellipsis {
white-space: nowrap;/*强制不换行*/
overflow: hidden;/*超出部分隐藏*/
text-overflow: ellipsis;/*溢出部分用省略号代替*/
}

上述代码中，大家首先使用white-space属性将文本强制不换行，然后使用overflow属性将超出部分隐藏，最后使用text-overflow属性将溢出部分用省略号代替。

在Flex布局中，大家可以将这个样式应用于Flex容器、Flex项目或其内部的任何元素。如下所示：

/* 应用于Flex容器 */ 
.container { 
display: flex; 
flex-wrap: wrap; 
justify-content: space-between; 
} 
.container >div { 
width: calc(33.33% - 20px); 
margin-bottom: 20px; 
text-align: center; 
} 
.container >div >p { 
height: 60px; 
line-height: 30px; 
margin-top: 0; 
margin-bottom: auto; 
padding: 10px; 
background-color: #fff; 
border: 1px solid #ddd; 
box-shadow: 0 2px 2px rgba(0, 0, 0, .2); 
font-size: 16px; 
color: #666; 
text-align: justify; 
-webkit-box-orient: vertical; 
display: -webkit-box; 
-webkit-line-clamp: 2; 
overflow: hidden; 
text-overflow: ellipsis; 
}

上述代码中，大家使用了Flex布局，并将样式应用于Flex容器、Flex项目以及其内部的p标签。在p标签中，大家设置了一个固定高度，使用多行文本截断技术，通过text-overflow让它在一定长度后显示省略号。

通过使用Flex布局中的省略号技术，大家可以轻松实现单行或多行文本的截断，避免了文本溢出影响页面美观的问题。