问题来源于最近一次的工程实践
参考:
问题截图:
问题代码:
<!-- 详情弹出框 -->
<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>
结果是好的: