网站制作素材代码个人备案网站名称

目前在工作上有一个需求，就是当文本内容过长时，中间显示省略号…,两端正常展示。我这里是使用组件化的方式来实现，我百度看，别人用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.textconst 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

点击蓝色的超链接也可以