css - 关于label span组成的展示表格，如何控制它的宽度

问题描述

在这样一个结构中，如何让该行数据，当某个span文字太长时，能自动换行，然后在小屏及大屏4个项能平均分配宽度，自适应那样呢 ？应该如何用样式控制比较好？求救！谢谢

问题解答

是要这个效果吗？

宽度变化也没问题

html:

<p class='line_block'> <p class='line_data'><p class='xxx'> <label>项目名称：</label> <span class='w-130'>测试信息学校信息寻寻</span></p> </p> <p class='line_data'><p class='xxx'> <label>项目名称：</label> <span class='w-130'>测试信息学校信息寻寻</span></p> </p> <p class='line_data'><p class='xxx'> <label>项目名称：</label> <span class='w-130'>测试信息学校信息寻寻</span></p> </p> <p class='line_data'><p class='xxx'> <label>项目名称：</label> <span class='w-130'>测试信息学校信息寻寻</span></p> </p></p>

css:

.line_block{ width: 100%; font-size: 0;}.line_data{ display: inline-block; vertical-align: top; width: 25%; font-size: 14px;}.xxx{ padding: 10px;}

多加了一个p用来加个padding，要不都挤在一起不好看，可以去掉。