layui <input type="checkbox"> title换行

layui框架中的<input type="checkbox">标签默认情况下，标题文本不会自动换行。如果你想让标题支持换行，你需要自定义样式或者通过JavaScript处理。你可以尝试使用HTML的`<label>`元素包裹`<input>`，并在`<label>`里添加`<span>`或者其他容器，并设置`display: block;`使其可以容纳多行文本：

<label>
  <input type="checkbox" lay-ignore>
  <span>这是有换行的标题</span>
</label>

这里的`lay-ignore`属性是用来忽略layui的一些默认交互，如果你不需要layui对这个checkbox的额外处理。

如果需要在CSS上做更多定制，可以这样做：

input + span {
  display: block;
  white-space: pre-wrap; /* 或者white-space: -moz-pre-wrap;  Firefox */
  word-wrap: break-word; /* 为了兼容老版本浏览器 */
}

相关问题

我希望我点击注册的时候跳转到regist.html页面，用layui的方式实现，<div class="layui-container"> <div class="admin-login-background"> <div class="layui-form login-form"> <form class="layui-form" action=""> <div class="layui-form-item logo-title"> <h1>用户登录</h1> </div> <div class="layui-form-item"> <label class="layui-icon layui-icon-username" for="username"></label> <input type="text" name="email" lay-verify="required|account" placeholder="邮箱" autocomplete="off" class="layui-input" value="admin"> </div> <div class="layui-form-item"> <label class="layui-icon layui-icon-password" for="password"></label> <input type="password" name="password" lay-verify="required|password" placeholder="密码" autocomplete="off" class="layui-input" value="123456"> </div> <div class="layui-form-item"> <label class="layui-icon layui-icon-vercode" for="captcha"></label> <input type="text" name="captcha" lay-verify="required|captcha" placeholder="图形验证码" autocomplete="off" class="layui-input verification captcha" value="xszg"> <div class="captcha-img"> <img id="captchaPic" src="../images/captcha.jpg"> </div> </div> <!-- <div class="layui-form-item"> <input type="checkbox" name="rememberMe" value="true" lay-skin="primary" title="记住密码"> </div> --> <div class="layui-form-item"> <button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit="" lay-filter="login">登 录</button> </div> <div class="layui-form-item"> <button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit="" lay-filter="regist">注 册</button> </div>

可以在 "注册" 按钮的标签上添加一个 onclick 事件，来实现点击跳转到 regist.html 页面。具体代码如下：

<button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit="" lay-filter="regist" onclick="location.href='regist.html'">注 册</button>

这样点击注册按钮时就会跳转到 regist.html 页面了。

<form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">报表名称</label> <div class="layui-input-block"> <input type="text" name="reportName" required lay-verify="required" placeholder="请输入报表名称" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">报表组</label> <div class="layui-input-block"> <select name="reportGroup" lay-verify="required"> <option value=""></option> <option value="group1">分组1</option> <option value="group2">分组2</option> <option value="group3">分组3</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">报表路径</label> <div class="layui-input-block"> <input type="text" name="reportUrl" required lay-verify="required" placeholder="请输入报表路径" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">报表抽样条件路径</label> <div class="layui-input-block"> <input type="text" name="reportCdnUrl" required lay-verify="required" placeholder="请输入抽样条件路径" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">是否启用</label> <div class="layui-input-block"> <input type="checkbox" name="enable" lay-skin="switch" lay-filter="switchTest" lay-text="启用|禁用"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> 调整label的宽度为200

可以通过修改CSS样式来调整label的宽度为200，代码如下：

<style>
    .layui-form-label {
        width: 200px;
    }
</style>

将上述代码放在HTML代码之前或者在外部CSS文件中即可。