element ElMessage 换行 显示

要在 element-ui 的 ElMessage 组件中换行显示内容，可以使用 HTML 的 `<br>` 标签或者 CSS 的 `white-space: pre-line` 属性来实现。

方法一：使用 `<br>` 标签

this.$message({
  message: '第一行内容<br>第二行内容',
  dangerouslyUseHTMLString: true
});

方法二：使用 CSS 属性

this.$message({
  message: '第一行内容\n第二行内容',
  customClass: 'message-multiline'
});

.message-multiline .el-message__content {
  white-space: pre-line;
}

以上两种方法都可以实现在 ElMessage 组件中换行显示内容。注意在使用 `<br>` 标签时，需要将 `dangerouslyUseHTMLString` 设置为 `true`，以确保 HTML 标签被解析为实际的换行符。而使用 CSS 属性时，通过为 ElMessage 添加自定义类名，并为该类名定义 `white-space: pre-line` 属性来实现换行显示。

相关问题

element-plus ElMessage 换行 显示

在 element-plus 中，ElMessage 组件已经被废弃，取而代之的是 ElNotification 和 ElMessageBox。如果你想在 element-plus 中实现消息的换行显示，可以使用 ElNotification 或者 ElMessageBox 的 content 参数，并在内容中使用 `<br>` 标签或者 CSS 的 `white-space: pre-line` 属性来实现。

方法一：使用 `<br>` 标签

this.$notification({
  title: '标题',
  message: '第一行内容<br>第二行内容',
  dangerouslyUseHTMLString: true
});

方法二：使用 CSS 属性

this.$notification({
  title: '标题',
  message: '第一行内容\n第二行内容',
  customClass: 'notification-multiline'
});

.notification-multiline .el-notification__content {
  white-space: pre-line;
}

以上两种方法都可以实现在 element-plus 的通知组件中换行显示内容。注意在使用 `<br>` 标签时，需要将 `dangerouslyUseHTMLString` 设置为 `true`，以确保 HTML 标签被解析为实际的换行符。而使用 CSS 属性时，通过为通知组件添加自定义类名，并为该类名定义 `white-space: pre-line` 属性来实现换行显示。

element 如何换行

在 HTML 中，可以使用 <br> 标签或者 CSS 中的 white-space 属性来实现 element 的换行。如果使用 <br> 标签，在需要换行的位置插入即可，而如果是使用 CSS 的 white-space 属性，可以将属性值设置为 pre-wrap 或者 pre-line。