Question

我遇到了Javascript和HTML问题。我正在使用用户提交的表单。如果凭据错误，脚本会在输入字段旁边显示一条文本消息该邮件包含一封我希望它可以点击的电子邮件事情就是：
当消息只是一个字符串时，一切正常当我添加<a href=\"mailto标记时，换行符。

<div id="message_box">
<span id="msgbox" style="display:none"></span>
</div>

行：

$("#msgbox").fadeTo(200,0.1,function()
        {
            var msg = ("Ooops, the number you enterd is not valid<br /> Please contact: some@mail.com to solve this problem").replace(/[\r\n]/g, '');
          $(this).html(msg).addClass('messageboxerror').fadeTo(900,1);
        });

（编辑）节目：
哎呀，你输入的号码无效
请联系：some@mail.com来解决这个问题 lines ok, the email is not clicakble

不行：

$("#msgbox").fadeTo(200,0.1,function()
        {
            var msg = ("Ooops, the number you enterd is not valid<br /> Please contact: <a href=\"mailto:some@mail.com\">some@mail.com</a> to solve this problem").replace(/[\r\n]/g, '');
          $(this).html(msg).addClass('messageboxerror').fadeTo(900,1);
        });

（编辑）节目：
哎呀，你输入的号码无效
请联系：
some@mail.com
解决这个问题
lines broken, email clickable

CSS：

#message_box {
    width:370px;
    height:30px;
    padding-top:15px;
}



   .messagebox{
 position:relative;
 width:100px;
 margin-left:0px;
 padding:290px;
 font-size:14px;
 color: #647a03;
}
.messageboxok{
 position:relative;
 padding:0px;
 width:100px;
 color:#F00;
 font-size:10px;

}
.messageboxerror{
 position:relative;
 width:100px;
 padding:0px;
 color:#CC0000;
 font-size:12px;
}

任何人都可以帮我删除这些恼人的换行符吗？

谢谢！

Answer 1

来自评论：

鉴于多位评论者要求完整CSS code，a标记设置为display: block。对于此锚标记，需要将其设置为inline。

W3C资源：

Answer 2

简单的答案是在white-space:nowrap;类上使用CSS messageboxerror。

.messageboxerror {
    white-space:nowrap;
}

你也可以玩display:inline-block;以及其他技巧，但对我来说，nowrap修复应该可以解决问题。

在这种情况下，它更像是一种解决方法，而不是一种修复，因此它可能无法解决导致它的底层布局问题，但如果它解决了问题，则无需进一步挖掘。

使用javascript和HTML换行

2 个答案: