文本内容在容器内自动换行 文本内容不超过三行，多余的部分隐藏

<template>
  <div class="circular-container">
    <div class="circular-text-container">
      {{ realTimeText }}
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      realTimeText: '这是一个长文本示例，展示了如何在圆形容器内自动换行并且不超出三行限制。'
    };
  },
  methods: {
    updateText(newText) {
      this.realTimeText = newText;
    }
  }
};
</script>
<style scoped>
/* 圆形容器的样式 */
.circular-container {
  width: 300px; /* 调整为适当的大小 */
  height: 300px; /* 调整为适当的大小 */
  background: #1ACCB2; /* 背景颜色 */
  border-radius: 50%; /* 圆形 */
  display: flex; /* 使用 flex 布局 */
  flex-direction: column; /* 纵向排列 */
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
  padding: 20px; /* 内边距 */
  overflow: hidden; /* 隐藏超出边界的内容 */
}

/* 限制行数的文本容器的样式 */
.circular-text-container {
  width: 90%; /* 确保文本框不会超过圆形边界 */
  overflow-wrap: break-word; /* 自动换行 */
  word-wrap: break-word; /* 兼容旧浏览器 */
  text-align: center; /* 文本居中 */
  color: white; /* 文本颜色 */
  line-height: 1.5; /* 设置行高 */
  max-height: 4.5em; /* 1.5行高 * 3行 = 4.5em */
  overflow: hidden; /* 隐藏超出限制的内容 */
}
</style>