HTML Label标签文字自动换行解决方案

最新推荐文章于 2024-09-11 09:18:51 发布

凯璇大帝

最新推荐文章于 2024-09-11 09:18:51 发布

阅读量6.4k

点赞数 3

文章标签： html

本文链接：https://blog.csdn.net/m0_37683852/article/details/113115857

版权

在写表单过程中，有时由于label内文字内容过长，会出现文字自动换行的现象，使得表单不美观，可通过添加style="white-space: nowrap"避免换行

<label class="layui-form-label" style="white-space: nowrap">喉部上游无量纲半径</label>

但有时会与其后文本框干涉：

这里我的解决方案是将这两个元素放在table内，保证样式统一：

<table class="layui-table" lay-even="" lay-skin="nob">
    <colgroup>
        <col width="150">
        <col width="150">
    </colgroup>
    <tbody>
        <tr>
            <td align="right">此处应有输入标签</td>
            <td align="left"><input type="text" class="layui-input calPara">/td>                        
        </tr>
    </tbody>
</table>

效果如下：