flex省略号失效_响应式超出省略_css超出省略
2024-10-05 07:09:21
现有超出省略只能解决固定宽度的盒子,下文为你讲述如何利用flex做出响应式布局
5359
举个例子
//html <div class="flex"> <div class="label">label</div> <div class="content"> <div class="value">111112212212112111112212212112111112212212112111112212212112111112212212112111112212212112111112212212112111112212212112111112212212112111112212212112</div> </div> //css .flex{ display: flex; } .value{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
这样无法超出省略,
但是可以在content加入overflow: hidden;或者min-width: 0;
.content{ overflow: hidden; min-width: 0; }
就可以使.value超出后省略