uniapp中，有两个容器，文本初始状态是左对齐，如何实现当其中一个容器中的文本自动换行时，同时缩小字体大小并将另一个容器中的文本设置为居中

在 UniApp 开发中，如果你需要实现在两个容器中的文本行为变化，一种可能的做法是使用 Vue 的动态样式和响应式特性。假设你有如下的两个容器：

<view class="container-left" :style="{ textAlign: isAutoWrap ? 'justify-content:center' : 'text-align:left', fontSize: isAutoWrap ? 'smaller' : 'normal' }">
  <text v-if="isLeftText">{{ leftText }}</text>
</view>

<view class="container-right" :style="{ textAlign: !isAutoWrap ? 'center' : 'auto' }">
  <text v-if="isRightText">{{ rightText }}</text>
</view>

在这个例子中，`isAutoWrap` 是一个 Vue 的数据属性，用于控制左侧容器是否启用自动换行。当你希望左边容器自动换行时，将 `isAutoWrap` 设置为 true，并相应地调整文本对齐(`justify-content:center`)和字体大小(`smaller`)。

右侧容器默认居中显示，如果左侧启用自动换行，则将其文本对齐改为 `'auto'` 来配合左侧的行为。

然后，在对应的 Vue 组件内部，你可以这样管理这个状态：

export default {
  data() {
    return {
      isLeftText: true,
      isAutoWrap: false, // 初始值为false，当某个条件触发时切换到true
      leftText: '这是左侧的文本',
      rightText: '这是右侧的文本',
    };
  },
  methods: {
    onLeftTextChange() {
      this.isAutoWrap = true; // 当左侧文本需要换行时，改变状态
    },
    onRightTextChange() {
      this.isAutoWrap = false; // 右侧内容不变则保持左对齐
    }
  }
}

通过这种方式，你可以根据需求手动触发相应的操作，来改变两个容器的文本展示效果。