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

如果同时设置宽度和高度

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

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