css 動态文本對齊自适應 — 文本寬度小于容器寬度時居中對齊，文本寬度大于容器寬度時居左對齊

• 文本寬度小于容器寬度時居中對齊

• 文本寬度大于容器寬度時居左對齊

核心css代碼

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

.box {
        text-align: center;
    }

    .content {
        display: inline-block;
        text-align: left;
    }      

完整範例代碼

<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>