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

目录

• 前言
• 1. 省略号
• 2. 完整展示
• 3. Demo

前言

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

一共有两种方式：

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

1. 省略号

文本溢出时显示省略号

.item-value {
  flex-basis: 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%; 
  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) {
      
      return 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%; 
  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>