CSS实现文本溢出省略号或完整显示

前言

文本内容超出容器宽度的问题，为了保持页面布局的整洁，通常会使用省略号来隐藏多余的内容

一共有两种方式：

1. 设定省略号
2. 完整展示

1. 省略号

文本溢出时显示省略号

.item-value {flex-basis: 70%; /* 设置宽度为父元素的70% */white-space: nowrap; /* 禁止文本换行，强制单行显示 */overflow: hidden; /* 隐藏超出容器的内容 */text-overflow: ellipsis; /* 超出部分使用省略号表示 */cursor: pointer; /* 鼠标悬停时显示指针，表示可点击 */
}

在某些场景下，用户可能需要查看被省略的完整文本

通过CSS中的伪类和事件状态，可以实现类似长按或点击查看完整内容的效果

.item-value:active {white-space: normal; /* 允许多行显示 */overflow: visible; /* 显示完整内容，不再隐藏 */text-overflow: initial; /* 去除省略号 */
}

2. 完整展示

.item-value {flex-basis: 70%; /* 值占用70%宽度 */white-space: nowrap; /* 防止换行 */overflow: visible; /* 允许内容溢出时显示滚动条 */white-space: normal; /* 允许内容正常换行 */text-overflow: clip; /* 不显示省略号 */cursor: pointer; /* 鼠标悬停时显示指针，表示可以点击查看 */
}

3. Demo

整体Demo配合如下：

<template><view><!-- 搜索栏和新增风险按钮 --><view class="search-class bg-white"><view class="search-button bg-white" style="display: flex; justify-content: space-around;"><button v-if="checkPermission('ship:risk:create')" class="bg-green" style="width: 40%;" @click="dataInfo()">新增风险</button></view></view><!-- 数据内容卡片列表 --><view class="data-content"><uni-card class="card" v-for="item in dataList" :key="item.id" :extra="item.shipCod"><!-- 船舶信息列表 --><uni-list><!-- 船舶位置 --><view class="list-item-container"><text class="item-title">位置:</text><text class="item-value">{{ item.vesselPosition }}</text></view><!-- 船舶描述，文本溢出显示省略号 --><view class="list-item-container"><text class="item-title">描述:</text><text class="item-value">{{ item.vesselDescribe }}</text></view><!-- 图片展示，点击预览 --><view class="list-item-container"><text class="item-title">图片:</text><view class="item-value"><image :src="item.vesselPicture" mode="widthFix" class="vessel-image" @click="previewImage(item.vesselPicture)"></image></view></view></uni-list></uni-card></view></view>
</template><script>
export default {data() {return {dataList: [{ id: 1, vesselPosition: '广州港', vesselDescribe: '这是一个非常长的描述，测试文本溢出显示效果。', vesselPicture: 'https://via.placeholder.com/150', shipCod: 'COD001' },{ id: 2, vesselPosition: '深圳港', vesselDescribe: '描述二', vesselPicture: 'https://via.placeholder.com/150', shipCod: 'COD002' },// 更多数据项...]};},methods: {checkPermission(permission) {// 权限检查逻辑，返回true或falsereturn true; // 示例中暂时返回true},dataInfo() {// 新增风险的逻辑console.log('新增风险');},previewImage(imageUrl) {// 图片预览逻辑console.log('预览图片:', imageUrl);}}
};
</script><style scoped>
.data-content {padding: 20px;
}.card {margin-bottom: 20px;
}.list-item-container {display: flex;margin-bottom: 10px;
}.item-title {font-weight: bold;flex-basis: 30%;
}.item-value {flex-basis: 70%; /* 值占用70%宽度 */white-space: nowrap; /* 防止换行 */overflow: hidden; /* 隐藏溢出内容 */text-overflow: ellipsis; /* 超出部分显示省略号 */cursor: pointer; /* 鼠标悬停时显示指针，表示可以点击查看 */
}/* 长按显示完整内容 */
.item-value:active {white-space: normal; /* 长按时允许多行显示 */overflow: visible; /* 展示完整内容 */text-overflow: initial; /* 去掉省略号 */
}.vessel-image {width: 100px;height: auto;
}
</style>