\n 以及<br>對於 JavaScript 中的新行，警報不起作用

Question

我正在使用 JavaScript 警報（雖然稍作修改）。 此警報具有標題字段和內容字段。 在我的內容字段中，我想在新行中顯示一些文本，但\n和<br>都不起作用。 查看圖片以檢查給定代碼的 output。

new Attention.Alert({
                title: 'School',
                content: 'Date - '+v_date+'\n School Name - '+ school_name + "\n School City - " + school_city + " "
            });

Answer 1

您只需添加CSS white-space: pre-line; 用於彈出內容。

這是工作示例。

 jQuery(document).ready(function($) { $('button').click(function(e){ e.preventDefault(); var v_date = '04/11/2019'; var school_name = 'School Name'; var school_city = 'School City'; new Attention.Alert({ title: 'This is a Title', content: 'Date - '+v_date+'\n School Name - '+school_name+'\n School City - '+school_city }); }); });

 *, *:after, *:before{ box-sizing: border-box; } body { font-family: 'Open Sans', serif; background-color: #d1d8de; padding: 20px; }.attention-component.inner-container p{ white-space: pre-line; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://janmarkuslanger.github.io/attention.js/dist/attention.js"></script> <link href="https://janmarkuslanger.github.io/attention.js/dist/attention.css" rel="stylesheet"> <button>Click</button>