文字超出后隐藏，显示三个点
overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
以浮窗的形式展示全部内容
.tableTitle span[data-title] {position: relative;}.tableTitle span[data-title]:hover:after {opacity: 1;transition: all 0.1s ease 0.5s;visibility: visible;}.tableTitle span[data-title]:after {content: attr(data-title);background-color: rgba(80, 79, 79, 0.8);color: #fff;font-size: 2.8rem;position: absolute;padding: 3.5rem 3rem;left: -10px;bottom: -1.5em;border-radius: 4px;white-space: nowrap;box-shadow: 0 0 4px rgba(0, 0, 0, 0.16);z-index: 99999;visibility: hidden;opacity: 0;}
效果图
案例为 vue3 写法
<!-- 市委、市政府领导带班预安排 @author 滕禹鑫Last modification .7.15--><template><div class="box"><h1>市委、市政府领导带班表</h1><div id="leaderMain"><div class="tableTitle"><span data-title="值班时间">值班时间</span><span data-title="市委市政府领导">市委市政府领导</span><span data-title="带班市领导">带班市领导</span><span data-title="协助代办干部">协助代办干部</span><span data-title="总值班市人员">总值班市人员</span></div><vue3-seamless-scroll :list="list" class="scroll" hover="true"><div class="item" v-for="(item, index) in list" :key="index"><span :data-title="item.time">{{ item.time }}</span><span :data-title="item.shiLeader">{{ item.shiLeader }}</span><span :data-title="item.daiLeader">{{ item.daiLeader }}</span><span :data-title="item.ganBu">{{ item.ganBu }}</span><span :data-title="item.offic">{{ item.offic }}</span></div></vue3-seamless-scroll></div></div></template><script setup>import { defineComponent, ref } from "vue";import { Vue3SeamlessScroll } from "vue3-seamless-scroll";let data1 = [{time: "7月2日-7月3日",shiLeader: "飞来一只蝴蝶",daiLeader: "事实上",ganBu: "黄沙滤过",offic: "行走苍茫星河",},{time: "7月2日-7月3日",shiLeader: "飞来一只蝴蝶",daiLeader: "事实上",ganBu: "黄沙滤过",offic: "行走苍茫星河",},{time: "7月2日-7月3日",shiLeader: "飞来一只蝴蝶",daiLeader: "事实上",ganBu: "黄沙滤过",offic: "行走苍茫星河",},{time: "7月2日-7月3日",shiLeader: "飞来一只蝴蝶",daiLeader: "事实上",ganBu: "黄沙滤过",offic: "行走苍茫星河",},{time: "7月2日-7月3日",shiLeader: "飞来一只蝴蝶",daiLeader: "事实上",ganBu: "黄沙滤过",offic: "行走苍茫星河",},{time: "7月2日-7月3日",shiLeader: "飞来一只蝴蝶",daiLeader: "事实上",ganBu: "黄沙滤过",offic: "行走苍茫星河",}];const list = ref(data1);</script><style scoped>#leaderMain {margin-left: 9rem;}.scroll .item span[data-title] {position: relative;}.scroll .item span[data-title]:hover:after {opacity: 1;transition: all 0.1s ease 0.5s;visibility: visible;}.scroll .item span[data-title]:after {content: attr(data-title);background-color: rgba(80, 79, 79, 0.8);color: #fff;font-size: 2.8rem;position: absolute;padding: 2rem 3rem;left: 20px;bottom: -1.5em;border-radius: 4px;white-space: nowrap;box-shadow: 0 0 4px rgba(0, 0, 0, 0.16);z-index: 99999;visibility: hidden;opacity: 0;}.tableTitle span[data-title] {position: relative;}.tableTitle span[data-title]:hover:after {opacity: 1;transition: all 0.1s ease 0.5s;visibility: visible;}.tableTitle span[data-title]:after {content: attr(data-title);background-color: rgba(80, 79, 79, 0.8);color: #fff;font-size: 2.8rem;position: absolute;padding: 3.5rem 3rem;left: -10px;bottom: -1.5em;border-radius: 4px;white-space: nowrap;box-shadow: 0 0 4px rgba(0, 0, 0, 0.16);z-index: 99999;visibility: hidden;opacity: 0;}/* 表格头部 */.tableTitle {width: 120rem;display: flex;flex-direction: row;align-items: center;color: #b6becd;justify-content: space-between;line-height: 7rem;background-color: rgba(0, 102, 181, 0.7);padding: 0 0rem;margin-top: 3rem;}.tableTitle span {cursor: pointer;font-size: 3.6rem;width: 24rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}/* 表格主体内容 */.scroll {height: 360px;width: 120rem;overflow: hidden;}.scroll .item {display: flex;align-items: center;justify-content: space-between;color: #fff;margin-top: 4rem;}.scroll .item span {width: 24rem;cursor: pointer;}.box {position: absolute;top: 128rem;right: 12rem;width: 130.4rem;height: 64rem;background-image: url("../assets/bg-small.png");/* 必须要设置>9，才能浮现在上面 */z-index: 10;}.box h1 {color: #fff;font-size: 5rem;margin-top: 10rem;margin-left: 10rem;}</style>
