Vue中使用{{ }}插值/模板但是文字过长超出组件边界甚至屏幕范围的解决办法_vue 数字超出了边框

问题来源于最近一次的工程实践

参考：

VUE3{{变量}}中文字超过盒子长度不自动换行解决办法

使用Vue文本插值当文本溢出时如何自动换行

word-break 换行

每日一学—CSS3 word-wrap 属性

问题截图：

问题代码：

<!-- 详情弹出框 -->
    <div>
        <el-dialog v-model="dialogDetailVisible" title="详情" draggable>
            <el-descriptions :column="1">
                <el-descriptions-item label="名称">{{ showAnn.value.announcement_Name }}</el-descriptions-item>
                <el-descriptions-item label="公告ID">{{ showAnn.value.announcement_ID }}</el-descriptions-item>
                <el-descriptions-item label="发布时间">{{ showAnn.value.announcement_Time }}</el-descriptions-item>
                <el-descriptions-item label="管理员ID">{{ showAnn.value.administrator_ID }}</el-descriptions-item>
                <el-descriptions-item label="内容">{{ showAnn.value.announcement_Content }}</el-descriptions-item>
            </el-descriptions>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogDetailVisible = false">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>

解决办法：

在style中写入如下代码：

word-break: break-all;
word-wrap: break-word;

通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。

word-wrap属性允许长的内容可以自动换行。

可以这样做：

<template>
<!-- 详情弹出框 -->
 
    <!-- 在这里添加class -->
    <div class="text-wrapper">
 
        <el-dialog>
            <el-descriptions>
                <el-descriptions-item label="内容">
                    {{ 要显示的内容 }}
                </el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </div>
</template>
 
<script lang="ts" setup>
...
</script>
 
<style scoped>
 
<!-- 在这里添加style -->
.text-wrapper {
    word-break: break-all;
    word-wrap: break-word
}
 
</style>

结果是好的：