SweetAlert 文本格式答案

【问题标题】：SweetAlert text formattingSweetAlert 文本格式
【发布时间】：2021-05-16 16:01:34
【问题描述】：

我正在使用 sweetAlert 来显示对话框。在我的对话框中，我必须显示一个大字符串，中间有换行符。我的示例字符串如下：

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

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

【问题讨论】：

可以设置文本为html，使用无边框表格
@AlonEitan str 是一个变量，根据单击按钮的时间动态填充。我不确定我是否可以做到，将尝试更新！我认为这应该是可能的。谢谢！

标签： javascript sweetalert

【解决方案1】：

将字符串包装到<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;
}

&lt;script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"&gt;&lt;/script&gt;

PS。不支持原版的sweet alert插件，建议使用SweetAlert2插件。

迁移很简单，这里是迁移指南：Migration from SweetAlert to SweetAlert2

【讨论】：

谢谢，我为此苦苦挣扎了 2 个小时

【解决方案2】：

如果切换到sweetalert2，可以用html代替text：

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

【讨论】：

【解决方案3】：

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

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

代码被截断（简化后在此处发布）（德语）：

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 {
    }
  })
}

【讨论】：

【解决方案4】：

你可以使用 \n 换行

【讨论】：