实现当文本内容过长时，中间显示省略号...,两端正常展示

目前在工作上有一个需求，就是当文本内容过长时，中间显示省略号…,两端正常展示。我这里是使用组件化的方式来实现，我百度看，别人用css都可以实现。可以参考一下别人，我在最后面贴上别人的链接。
1.在vue2页面的移动端中使用；
2.在uni-app开发的微信小程序中使用；

1.用在vue页面：

代码：

<template>
    <div ref="truncatedText" class="text">
      {{ truncatedText }}
    </div>
  </template>
  
  <script>
  export default {
    props: {
      text: String,
    },
    data() {
      return {
        actualWidth: 0
      };
    },
    computed: {
      truncatedText() {
        if (!this.actualWidth) {
          return this.text;
        }
        // 这里是我后面发现有点Bug加的，本意就是当文字的长度小于我们的宽度的时候，就全部展示文字
  		let textWidth2 = this.getTextWidth(testText);
  		if(textWidth2  < his.actualWidth ) return this.text
  		// 这里结束
        const ellipsis = '...';
        let start = 0;
        let end = this.text.length;
        let middle = Math.floor((start + end) / 2);
  
        while (start < middle) {
          const testText = this.text.slice(0, middle) + ellipsis + this.text.slice(-middle);
          const testWidth = this.getTextWidth(testText);
  
          if (testWidth > this.actualWidth) {
            end = middle;
          } else {
            start = middle;
          }
  
          middle = Math.floor((start + end) / 2);
  
          if (middle === start || middle === end) {
            break;
          }
        }
  
        return this.text.slice(0, middle) + ellipsis + this.text.slice(-middle);
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.actualWidth = this.$refs.truncatedText.offsetWidth;
      });
    },
    methods: {
      getTextWidth(text) {
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        context.font = getComputedStyle(this.$refs.truncatedText).font;
        return context.measureText(text).width;
      }
    }
  };
  </script>
  
  <style scoped>
  .text {
    white-space: nowrap;
    overflow: hidden;
  }
  </style>

使用

<truncatedText :text="longText" />

2.用在uni-app上（我这里是用uni-app开发微信小程序）

代码：

<template>
    <div ref="truncatedText" class="text">
      {{ truncatedText }}
    </div>
  </template>
  
  <script>
  export default {
    props: {
      text: String,
    },
    data() {
      return {
        actualWidth: 0
      };
    },
    computed: {
      truncatedText() {
        if (!this.actualWidth) {
          return this.text;
        }
				const fullWidth = this.getTextWidth(this.text);
				if(fullWidth <= this.actualWidth) return this.text
        const ellipsis = '......';
        let start = 0;
        let end = this.text.length;
        let middle = Math.floor((start + end) / 2);
					
				if(this.actualWidth < end) {
					return this.text
				}
        while (start < middle) {
          const testText = this.text.slice(0, middle) + ellipsis + this.text.slice(-middle);
          const testWidth = this.getTextWidth(testText);
  
          if (testWidth > this.actualWidth) {
            end = middle;
          } else {
            start = middle;
          }
  
          middle = Math.floor((start + end) / 2);
  
          if (middle === start || middle === end) {
            break;
          }
        }
  
        return this.text.slice(0, middle) + ellipsis + this.text.slice(-middle);
      }
    },
			
		mounted() {
			this.getActualWidth();
		},
    methods: {
      getActualWidth() {
            const query = uni.createSelectorQuery().in(this);
            query.select('.text').boundingClientRect(rect => {
              this.actualWidth = rect.width;
            }).exec();
          },
          getTextWidth(text) {
            const context = uni.createCanvasContext('measureCanvas', this);
            context.setFontSize(14);
            return context.measureText(text).width;
          }
    }
  };
  </script>
  
  <style scoped>
  .text {
    white-space: nowrap;
    overflow: hidden;
		text-align: justify;
  }
  </style>

使用：有点小区别
在样式上有点改动

<template>
  <view class="index">
		<uni-card title="基础卡片" sub-title="副标题" extra="额外信息" thumbnail="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png">
			<text>这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</text>
		</uni-card>
		    <view>
		      <MiddleEllipsis :text="longText" />
		    </view>
		<view class="box">
			<view style="text-align: justify;">
				<truncatedText :text="longText" />
			</view>
			<view class="box-two">测试数据</view>
		</view>
	</view>
</template>

<script>
import MiddleEllipsis from '../../components/MiddleEllipsis/MiddleEllipsis.vue';
import truncatedText from '../../components/truncatedText/truncatedText.vue'

export default {
  components: { MiddleEllipsis,truncatedText },
  data() {
    return {
      longText: '这是一个需要中间省略的长文本示例，当容器宽度不足时显示省略号当容器宽度不足时显示省略号'
    };
  }
};
</script>
<style scoped>
	
.box {
  display: flex;
  align-items: center;
  padding: 10px;
}

.box > view:first-child {
  flex: 1;
  min-width: 0; /* 关键：允许文本容器压缩 */
}

.box-two {
  flex-shrink: 0; 
  max-width: 100px;
	margin-left: 5px;
}
</style>

别人使用js或css实现的，用了好几种方法，可以参考一下：
稀土掘金的资源
https://juejin.cn/post/7329967013923962895?searchId=20250412072930F6FA31D13CD50B9A187D#heading-2

点击蓝色的超链接也可以