попробуйте поставить !important вот так в css:

.swal-wide{
    width:850px !important;
}

See it working in the snippet.

function TestSweetAlert(){
    swal({
       title: 1 +' Issues for test',
       text: "A custom <span style='color:red;'>html</span> message.",
       html: true,
       type: "info",
       customClass: 'swal-wide',
       showCancelButton: true,
       showConfirmButton:false
   });
};

$('#testeSWAL').on("click",TestSweetAlert);

.swal-wide{
    width:850px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/>


<button id="testeSWAL"> Test SWAL </button>

Примечание: возможно, у вас возникнут проблемы с позицией.

В самых последних версиях вы можете использовать:

width: '800px'

i.e.:

swal({
    title: "Some Title",
    html: "<b>Your HTML</b>",
    width: '800px'
})

Документы Sweet Alert2

Вместо того, чтобы перезаписывать класс .sweet-alert css по умолчанию, вы можете определить свой собственный

.sweet-alert.sweetalert-lg { width: 600px; }

Затем просто используйте параметры sweetalert, чтобы настроить свой класс только на те оповещения, которые вы хотите сделать широкими:

swal({
  title: "test",
  text: "Am I wide?",
  customClass: 'sweetalert-lg'
});

PS (обновление): вам может потребоваться немного изменить класс sweetalert, чтобы правильно центрировать его:

.sweet-alert { margin: auto; transform: translateX(-50%); }

Вот jsbin, чтобы попробовать

Лучше использовать SweetAlert2, который является преемником SweetAlert. Просто добавьте свойство «ширина», например:

swal({
   title: priorityLevel +' Issues for '+appName,
   html: appHTML,
   type: "info",
   customClass: 'swal-wide',
   showCancelButton: true,
   showConfirmButton:false,
   width: '850px'
});

Простое решение — добавить приведенный ниже CSS. ссылка: Sweet alert 2 модальное окно слишком маленькое

.swal2-popup { font-size: 1.6rem !important; }

Ни один из ответов здесь не работал для меня. Все, что мне нужно было сделать, это добавить значение ширины в виде целого числа (без строк) и удалить суффикс «px».

swal({
       width: 400,
       html: data,
       showCancelButton: true,
       showConfirmButton:false,
       cancelButtonText: "Close",
});

Имя класса для модального окна SweetAlert — sweet-alert. Итак, если вы хотите изменить его ширину, правильный код CSS:

.sweet-alert { 
       width:  850px;   
}

Это работает с SweetAlert 1.1.3

Tried Everything , none Worked. The Only Thing which worked for me was to add a classname instead of custom class

В вашем js

swal({
       title : "More Data",
       className: "myClass"
     });

В вашем CSS

.myClass{
            width:600px;
            height:auto;
        }

Также вы можете добавить к заголовку HTML стиль:

        .swal-modal {
        width: 1000px;
        }

Эта работа для меня. Надеюсь это поможет

Если вы используете SweetAlert2, доступный здесь по адресу https://sweetalert2.github.io/.

затем для пользовательской ширины вы можете использовать свойство ширины функции Sval.fire(), например

Swal.fire({
  title: 'Custom width',
  width: 600,
})

не ответ, но я надеюсь, что помог кому-то. в моем случае modal казался маленьким из-за моих стилей тем. поэтому добавление этой фиксированной шахты к размеру по умолчанию.

.swal2-popup {
  font-size: 1.6rem !important;
}