使用 data 属性填充 HTML 标签，无需换行

Question

我创建了一个表单，用于检查密码的长度。 如果长度小于 6，则会出现错误消息。 此消息是由 javascript 创建的。 这就是问题所在，该消息在每个单词后出现换行符。 我也用“ ”试过了，但这不起作用:(

如何创建没有换行符的消息？

谢谢你的帮助！

 $("#registerPass").on("focusout", function() { if ($("#registerPass").val().length < 6) { $(this).removeClass("valid").addClass("invalid"); $('#registerPass + label').attr('data-error', 'Mindestens 6 Zeichen nötig!'); } });

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/css/mdb.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/js/mdb.min.js"></script> <form style="color: #757575;" action="#!"> <div class="md-form mb-5"> <input type="password" id="registerPass" class="form-control" required> <label data-error="" data-success="OK" for="registerPass">Passwort</label> </div> </form>

Answer 1

尝试将 width: 100% 添加到标签元素。 我检查了它并更新了下面的代码库。

 $("#registerPass").on("focusout", function() { if ($("#registerPass").val().length < 6) { $(this).removeClass("valid").addClass("invalid"); $('#registerPass + label').attr('data-error', 'Mindestens 6 Zeichen nötig!'); } });

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/css/mdb.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/js/mdb.min.js"></script> <form style="color: #757575;" action="#!"> <div class="md-form mb-5"> <input type="password" id="registerPass" class="form-control" required> <label data-error="" data-success="OK" for="registerPass" style="width: 100%">Passwort</label> </div> </form>

Answer 2

尝试将white-space: nowrap添加到您的 css 并定位标签的::after伪元素。

https://jsfiddle.net/jvko4wdq/

或者，您也可以使用 CSS 将label宽度设置为100% 。

Answer 3

将 100% 宽度设置为元素，就是这样！

<label data-error="" data-success="OK" for="registerPass" style='width: 100%'>Passwort</label>