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

Question

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

Answer 1

Do you want this effect?

No problem if the width changes

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;
}

I added an extra p to add padding. Otherwise, it won’t look good if they are all crowded together, so I can remove it.