在这个前端里 tr style=height 80px td rowspan=1 colspan=5 a-row a-col span=12 a-form-model-i
要处理label过长省略的问题,并且让其全部显示并换行,你可以使用CSS样式来控制标签的宽度和文本溢出的处理方式。
首先,在<a-form-model-item>标签中添加一个自定义的类名,例如label-wrap,用于后续的样式控制。
然后,在CSS中添加以下样式:
.label-wrap label {
display: block;
width: 100%;
word-break: break-all;
white-space: normal;
}
这样,label标签就会占满整个宽度,并且当文本过长时会自动换行显示。
完整代码如下:
<tr style="height: 80px">
<td rowspan="1" colspan="5">
<a-row>
<a-col :span="12">
<a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="人力资源是否其他项" prop="isHrOther" class="label-wrap">
<a-radio-group v-model="mdl.isHrOther" >
<a-radio value="1">
是
</a-radio>
<a-radio value="0">
否
</a-radio>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="人力资源其他" prop="hrOther" style="width: 80%; white-space: nowrap;">
<a-textarea
v-model="mdl.hrOther"
placeholder="请输入人力资源其他"
:auto-size="{ minRows: 2, maxRows: 6 }"
/>
</a-form-model-item>
</a-col>
</a-row>
</td>
</tr>
.label-wrap label {
display: block;
width: 100%;
word-break: break-all;
white-space: normal;
}
原文地址: https://www.cveoy.top/t/topic/jgLa 著作权归作者所有。请勿转载和采集!