SweetAlert text formatting

Question

I am using sweetAlert for dialog box display. Inside my dialog box, I have to display a large string with line breaks in between. My sample string is as follows:

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

and so on. So, basically, I want each of them in a new line and the spaces matched. When I use sweetalert dialog box line breaks are showing up properly but the text is aligned to the centre automatically and spacing is truncated. Can someone help me to manually set my alignment and spacing?

Answer 1

Wrapping a string into <pre> tag could be a solution:

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@11"></script>

---

PS. The original sweet alert plugin is unsupported, I suggest you using SweetAlert2 plugin.

Migration is simple, here's the migration guide: Migration from SweetAlert to SweetAlert2