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

目录

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

前言

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

一共有两种方式：

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或false
      return 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>