SweetAlert文本格式

时间:2017-06-06 06:41:49

标签: javascript sweetalert

我正在使用sweetAlert进行对话框显示。在我的对话框中,我必须显示一个大字符串,其中包含换行符。我的示例字符串如下:

var str="Task1Name          :    Success  :   statusCode\n 
         Task2NameLonger    :    Failed   :   statusCode\n"

等等。所以,基本上,我希望它们中的每一个都在一个新的行中并且空间匹配。当我使用sweetalert对话框时,换行符正确显示,但文本自动与中心对齐,间距被截断。有人可以帮我手动设置对齐和间距吗?

4 个答案:

答案 0 :(得分:6)

将字符串包装到<pre>标记中可能是一种解决方案:

var str="Task1Name          :    Success  :   statusCode\n" +
        "Task2NameLonger    :    Failed   :   statusCode\n";
         
Swal.fire({
  html: '<pre>' + str + '</pre>',
  customClass: {
    popup: 'format-pre'
  }
});
.format-pre pre {
  background: #49483e;
  color: #f7f7f7;
  padding: 10px;
  font-size: 14px;
}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

PS。原始的甜蜜警报插件不受支持,我建议您使用SweetAlert2插件。

迁移很简单,这是迁移指南:Migration from SweetAlert to SweetAlert2

答案 1 :(得分:1)

如果切换到sweetalert2,则可以使用html代替文本:

swal({ title: 'hi', html: 'First line<br>Second line' });

答案 2 :(得分:0)

我还必须用swal(2)显示(很多)文本,并且要显示大部分对齐的文本,最后一行居中。
首先,我尝试将customClass: 'swal-breit',应用于CSS 并在CSS中设置宽度和对齐方式。
但这不适用于我的情况...

由于CSS似乎不适用于我的情况,因此我已使用 HTML(段落和对齐)实现了它。在我的(具有判断力的)函数(带有嵌入式swal)中,我首先使用html代码创建变量,然后将属性html:设置为变量。
简短的介绍: 首先显示很多文本(左对齐),然后显示问题(居中)。
如果用户单击“ Ja”(是),则将加载特定的页面(视图),如果用户单击“ Nein”(否),则不会发生任何事情(关闭按钮,用户仍留在页面(视图)上。)

代码已被删除(简化为在此处发布)(德语):

function MySwalFunction() {
  var Meldungstext = "";
  Meldungstext = Meldungstext + '<p align="left"> text in paragraph here.. <strong>strong text kere...</strong> further normal text with line break. <br>'
  Meldungstext = Meldungstext + 'Second line of text </p>'
  Meldungstext = Meldungstext + '<p align="left"> second paragraph block.. with linebreak <br>'
  Meldungstext = Meldungstext + 'second line to second block </p>' 
  Meldungstext = Meldungstext + '<p align="left">tex ti third paragraph here </p>'
  Meldungstext = Meldungstext + '<strong>Last line WITHOUT paragraph = is showed centered (swal default) </strong>'

  swal.fire({
    title: '! Achtung !',
    html: Meldungstext,
    icon: 'question',
    showCancelButton: true,
    width: '90%',
    confirmButtonColor: 'blue',
    cancelButtonText: 'Nein',
    confirmButtonText: 'Ja',
  }).then(function (result) {
    if (result.value) {
      var hostname = window.location.origin;
      var xlink = hostname + "/main/sub/"
      location.href = xlink;
    }
    else {
    }
  })
}

答案 3 :(得分:0)

您可以只使用 \ n 换行换行