前端给一行文字不设置宽度 ，不拆分 ，又能让某几个字在视觉下方居中显示

不拆分文本 ，又能让文字下方居中显示

1. 效果图
   

2. 代码

<template><view class="content"><view class="text-wrap"><!-- 用 v-html 渲染带换行符的文本 --><text class="title" v-html="formattedTitle"></text></view></view>
</template><script>
export default {data() {return {// 原始文本（支持国际化动态文本）originalText: "Download Mulebuy APP Now for ExclusiveBenefits",};},computed: {formattedTitle() {// 关键：在 "for " 后插入换行符（可根据实际文本调整匹配规则）return this.originalText.replace("for ", "for <br>");},},
};
</script><style>
.content {display: flex;flex-direction: column;align-items: center;justify-content: center;
}.text-wrap {/* 不设置宽度，自适应内容 */display: flex;align-items: center;
}
.title {font-size: 36rpx;color: #8f8f94;text-align: center; /* 核心：让文本整体居中，第二行自动居中 */white-space: normal; /* 允许文本换行 */
}
</style>