使用 javascript 和 HTML 換行

Question

我對 Javascript 和 HTML 有疑問。 我正在使用用戶提交的表單。 如果憑據錯誤，腳本會在輸入字段旁邊顯示一條文本消息。
該消息包含一個 email，我希望它可以點擊。
事情是這樣的：
當消息只是一個字符串時，一切正常。
當我添加<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 解決此問題

不好：

$("#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);
        }); 

（編輯）顯示：
糟糕，您輸入的號碼無效
請聯系：
一些@mail.com
解決這個問題

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 代碼， a標簽設置為display: block 。 需要將此錨標記設置為inline 。

W3C 資源：

• 控制盒生成
• “顯示”屬性

Answer 2

簡單的答案是使用 CSS white-space:nowrap; 在messageboxerror錯誤 class 上。

.messageboxerror {
    white-space:nowrap;
}

你可以玩display:inline-block; 以及其他技巧，但對我來說 nowrap 修復應該可以解決問題。

在這種情況下，它更像是一種解決方法而不是修復，因此它可能無法修復導致它的底層布局問題，但如果它解決了問題，則無需進一步挖掘。