前端css样式设置元素的绝对定位和相对定位，要注意宽度和高度的设置

vue3子div position absolute,父div positon relative 。如果不设置子div的 width 和height,那么子div中如果数据变长,子div相对父div位置会变化。子div数据超过，显示... 如何实现

<template><div class="parent"><div class="child">{{ dynamicContent }}</div></div></template><script>export default {data() {return {dynamicContent: "这是一666666666个动态内容，可以很长很长6666666666"};}};</script><style scoped>.parent {position: relative;width: 200px;height: 100px;border: 1px solid #000;}.child {position: absolute;text-align: center;top: 40%;width: 21%;left: 0;background: pink;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}</style>

如果同时设置宽度和高度

此时如果不设置宽度，设置高度 显示效果

设置宽度，不设置高度 显示效果