css 动态文本对齐自适应 — 文本宽度小于容器宽度时居中对齐，文本宽度大于容器宽度时居左对齐

<div class="box">
    <p class="content">动态文本内容</p>
</div>

<template>
    <div style="padding: 20px">
        <div class="box">
            <p class="content">{{data}}</p>
        </div>
        <br>
        <button @click="moreContent">更多文字</button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                data: '文字内容'
            }
        },
        methods: {
            moreContent() {
                this.data += "文字内容"
            }
        }
    }
</script>
<style scoped>
    .box {
        width: 200px;
        padding: 10px;
        border: 1px solid red;
        text-align: center;
    }
 
    .content {
        display: inline-block;
        text-align: left;
    }
</style>