# uni-app 中弹窗文本多行显示问题解决经验

## 问题描述
在 uni-app 项目中，健康提醒页面的权限引导弹窗中，引导文本应该以多行显示，但实际显示时全部文本被挤压在同一行，导致可读性差。

## 原来的解决方案
最初的代码使用了 `<text>` 元素来显示引导文本，并通过 CSS 设置 `white-space: pre-line;` 来支持换行符（`\n`）的显示。

```vue
<text class="modal-text">为了更好地为您提供健康提醒服务，请您按以下步骤开启消息通知权限：{{ '\n\n' }}1. 点击下方【去开启】按钮{{ '\n' }}2. 进入【通知管理】选项{{ '\n' }}3. 开启【接收通知】开关{{ '\n' }}4. 确保各项健康提醒均为【接收】状态{{ '\n\n' }}开启后，您将及时收到血压、血糖等重要健康提醒</text>
```

对应的 CSS：
```css
.modal-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
  white-space: pre-line; /* 添加这行来支持换行 */
}
```

## 机制导致的失败原因
在 uni-app 框架中，`<text>` 组件是专门用于显示单行文本的内联元素。它默认不支持多行文本显示，即使通过 CSS 设置 `white-space: pre-line;` 来保留换行符，也无法在小程序环境中正确渲染多行文本。这是因为 `<text>` 组件在底层实现上被设计为单行显示，忽略了换行相关的样式属性。

## 新的解决方案
将 `<text>` 元素替换为 `<view>` 元素。`<view>` 是块级元素，支持多行文本显示，并能正确响应 `white-space: pre-line;` 样式。

修改后的代码：
```vue
<view class="modal-text">为了更好地为您提供健康提醒服务，请您按以下步骤开启消息通知权限：{{ '\n\n' }}1. 点击下方【去开启】按钮{{ '\n' }}2. 进入【通知管理】选项{{ '\n' }}3. 开启【接收通知】开关{{ '\n' }}4. 确保各项健康提醒均为【接收】状态{{ '\n\n' }}开启后，您将及时收到血压、血糖等重要健康提醒</view>
```

CSS 保持不变：
```css
.modal-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
  white-space: pre-line;
}
```

## 总结经验
1. **了解组件特性**：在 uni-app 中，`<text>` 和 `<view>` 组件有不同的用途。`<text>` 适合单行文本，`<view>` 适合多行或复杂布局。
2. **样式兼容性**：即使 CSS 属性在 Web 端有效，也不一定在小程序环境中生效。需要根据 uni-app 的文档和实践经验选择合适的组件。
3. **调试方法**：遇到样式不生效时，先检查组件类型是否合适，然后考虑使用更灵活的块级元素。
4. **最佳实践**：对于需要多行显示的文本内容，优先使用 `<view>` 元素，并结合适当的 CSS 来控制格式。