html css flex 超出隐藏处理

/\* 第三个元素不缩小优先显示 \*/ .flex-item:nth-child(3) { flex: 0 0 auto; } /\* 前两个元素允许缩小超出隐藏 \*/ .flex-item:nth-child(1), .flex-item:nth-child(2) { flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.attendee-info { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .attendee-name { font-size: 16px; font-weight: 600; color: #1D1D1F; margin-bottom: 12px; } .attendee-detail { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #666; overflow: hidden; .attendee-brief { flex: 0 0 auto; } .attendee-type { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } div classattendee-info div classattendee-name{{ attendee.name }}/div div classattendee-detail span classattendee-brief{{ attendee.countryName }} 010210210210120/span span classattendee-type{{ locale zh ? typeList[attendee.type] : typeListEN[attendee.type] }}02012021021012021102102102/span span classattendee-brief{{ attendee.idCard }}012012021021/span /div /div.attendee-detail { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #666; overflow: hidden; .attendee-brief { flex: 0 0 auto; } .attendee-type { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }