uniapp按钮中换行

在UniApp按钮中实现换行

在UniApp中，按钮文本默认不支持直接换行（如<button>标签内的文字）。但可以通过以下方法实现类似效果：

使用<view>模拟按钮 通过CSS样式将<view>元素模拟成按钮，内部文本可自由换行：

<view class="custom-btn">
  第一行文字<br/>第二行文字
</view>

.custom-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007AFF;
  color: white;
  border-radius: 5px;
  text-align: center;
}

利用UniApp的<text>组件 结合<text>的换行特性与按钮样式：

<button class="multi-line-btn">
  <text>第一行文字\n第二行文字</text>
</button>

.multi-line-btn text {
  white-space: pre-line;
}

通过模板语法动态插入换行符 在数据绑定中使用\n并设置CSS：

<button>{{ btnText }}</button>

data() {
  return {
    btnText: "第一行\n第二行"
  }
}

button {
  white-space: pre-line;
}

注意事项

• 原生<button>组件在某些平台（如小程序）可能严格限制样式，建议优先使用<view>方案
• 换行符\n需要配合white-space: pre-line或pre-wrapCSS属性生效
• 在H5端可通过HTML的<br/>标签直接换行，但小程序端需使用\n