text-overflow:ellipsis显示省略符号来代表被修剪的文本

text-overflow:ellipsis 显示省略符号来代表被修剪的文本

浏览器支持性:所有主流浏览器都支持(chrome、ie、firefox、safari、opera)

注意:下面这些css属性要一起使用(text-overflow适用块级元素)

    overflow: hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

显示省略号来代替被修剪的文本经常用在列表显示(Web移动端)。

text-overflow的另一个属性值clip会修剪文本。

 

添加hover事件显示全部内容,如下所示:

div.test:hover

{

text-overflow:inherit;

overflow:visible;

 

}

<!-- * @Author:wb_shaohui * @Date: 2024/05/09 13:37:18 * @LastEditors: * @LastEditTime: 2024/05/11 12:37:18 * @Description: --> <template> <div class="price-refer-box"> <div class="price-refer__title"> <div class="revenue-voucher-position-title">定制收益率参考</div> <div class="revenue-voucher-bg-photo"></div> </div> <!-- 价格参考 --> <div class="price-refer__content"> <div class="flex-bettween"> <div class="price-refer__desc">本周固定收益率凭证定制收益率参考</div> <!-- <div class="price-refer__right">销售收入:0.2%年</div> --> <el-row> <el-col :span="12" style="width: 85%"> <div class="price-refer_right"> <el-button type="text" class="view-more-right" @click.stop="handleClickView($event,'bzgs')"> 查看更多<el-badge v-if="hasBtnAuth('iterBusi-bzgs-fh-btn')" :value="unRecheckNum_bzgs" :max="99" class="badge-item"></el-badge>>> </el-button> </div> </el-col> </el-row> </div> <div class="price-refer__wrap"> <div class="price-refer__table"> <el-table :data="sypjData" height="225" :border="false" style="width: 100%" stripe :row-class-name="tableRowClassName" :header-cell-style="{ background: '#DCEDFF',color:'#606266' }" :cell-style="gspzCellStyle" > <el-table-column v-for="(col, index) in columns" :key="index" :prop="col.prop" :label="dynamicHeaders[col.prop]" :width="col.width"> <template v-if="hasBtnAuth('iterBusi-bzgs-edit')" #header> <el-input v-model="dynamicHeaders[col.prop]" @blur="saveHeader(col.prop)" size="mini" class="elinput" style="color:#606266;font-size:14px;" /> </template> <template v-else #header> <span>{{dynamicHeaders[col.prop]}}</span> </template> </el-table-column> </el-table> </div> <!-- <div class="price-refer_bc"> <div class="price-refer__tbts">特别提示:</div> <div class="price-refer__tip" title=" 1、本表供内部参考,禁止向客户提供 2、原则上定制起点1000万元。"> 1、本表供内部参考,禁止向客户提供<br /> 2、原则上定制起点1000万元。 </div> </div> --> </div> </div> <div class="price-refer__content"> <div class="flex-bettween"> <div class="price-refer__desc">代销收益率参考</div> <el-row> <el-col :span="12"> </el-col> <el-col :span="12" style="width: 85%"> <div class="price-refer_right"> <el-button type="text" class="view-more-right" @click.stop="handleClickView($event,'dljybj')"> 查看更多<el-badge v-if="hasBtnAuth('iterBusi-dljyjgck-fh-btn')" :value="unRecheckNum_dljybj" :max="99" class="badge-item"></el-badge>>> </el-button> </div> </el-col> </el-row> </div> <div class="price-refer__wrap"> <div class="price-refer__table"> <el-table :data="dljyData" height="225" :border="false" style="width: 100%" stripe :row-class-name="tableRowClassName" :header-cell-style="{ background: '#DCEDFF',color:'#606266' }" :cell-style="gspzCellStyle" > <el-table-column prop="fxrbjxt" label="发行人报价系统评级" width="160" height="15" > </el-table-column> <el-table-column prop="dbjg" label="整体收益率" width="160" height="15" > </el-table-column> <el-table-column prop="fxrbjxtt" label="发行期限(月)" width="160" height="15" > </el-table-column> <el-table-column prop="cped" label="产品额度(元)" height="15" > </el-table-column> </el-table> </div> <!-- <div class="price-refer_bc"> <div class="price-refer__tbts">特别提示:</div> <div class="price-refer__tip"> 打包价格包含客户收益及销售收入,以打包价格3%(年化)为例, 客户经理与客户沟通确定客户收益为2.7%(年化)时,客户经理销售收入为0.3%(年化) </div> </div> --> </div> </div> <DljyTable ref="dljyTable" :dljyMemo="dljyMemo" @handleDljyjgckTableSubmit="handleDljyjgckTableSubmit" > </DljyTable> <BzgsTable ref="bzgsTable" :bzgsMemo="bzgsMemo" @handleBzgsTableSubmit="handleBzgsTableSubmit"></BzgsTable> </div> </template> <script> import { gentlenessAll, getDljyjgckAll } from "@/api/servicehall.js"; import DljyTable from "./dljyjgck/dljyTable.vue"; import BzgsTable from "./bzgs/bzgsTable.vue"; import mixins from "@/view/iterationBusinessflow/mixins"; import authoMixins from "@/mixins/authoMixins"; export default { mixins: [mixins,authoMixins], props: { paramValues:{ type: Array, require: true }, }, components: { DljyTable,BzgsTable}, computed:{ dljyMemo(){//代理交易备注信息 return this.getParamData("dljy_memo"); }, bzgsMemo(){ return this.getParamData("bzgs_memo") } }, //components: { DljyTable }, data() { return { width: 1700, // 初始宽 height: 870, // 初始高 zoom: 1, // 计算要缩放的 宽度比(浏览器可视宽度与设计稿的宽度比) allDljyDatas:[],//代理交易价格参考弹框展示 allBzgsDatas:[],//本周固收弹框展示 sypjData: [], //本周固收 dljyData: [], //代理交易价格参考 showDataNum: [], //设定表格中最大显示数据条数 dialogVisible:false,//关闭 tabIndex: 0, sjzsDialogVisible: false, //代理交易/做市业务数据展示 intervalId: null, unRecheckNum_bzgs:"",//本周固收未复核提示 unRecheckNum_dljybj:"",//定制价格参考未复核提示 columns: [ { prop: 'fxqx', width: 310 }, { prop: 'dqck', width: 309 }, { prop: 'decd', width: 309 } ], dynamicHeaders: { fxqx: '发行期限', dqck: '银行存款', decd: '大额存单收益率', } }; }, mounted() { const savedHeaders = localStorage.getItem('sharedTableHeaders'); if (savedHeaders) { this.dynamicHeaders = JSON.parse(savedHeaders); } // 监听其他标签页的修改 window.addEventListener('storage', (event) => { if (event.key === 'sharedTableHeaders') { this.dynamicHeaders = JSON.parse(event.newValue); } }); this.initData(); if (this.revenueData1 && this.revenueData1.length > 0) { this.startScroll(); } }, created() { window.addEventListener('tableHeadersUpdated', () => { const savedHeaders = localStorage.getItem('sharedTableHeaders'); if (savedHeaders) { this.dynamicHeaders = JSON.parse(savedHeaders); } }); }, methods: { initData() { this.gentlenessAll(); this.getDljyjgckAll(); this.getAllDljyData(); this.getAllBzgsData(); }, //过滤参数数据 getParamData(val){ let temp=this.paramValues && this.paramValues.filter(item => {return item.paraCode.toLowerCase()==val;}); return temp&&temp[0]; }, //查看更多 handleClickView(evt, val) { this.elButtonBlur(evt); if (val == "dljybj" && this.$refs.dljyTable) { this.$refs.dljyTable.handleOpen("false",); } else { //bzgs this.$refs.bzgsTable.handleOpen("close",); } }, handleBzgsTableSubmit(type,data){ if(type == "close") { this.gentlenessAll(data); } }, handleDljyjgckTableSubmit(type,data){ if(type == "false") { this.getDljyjgckAll(data); } }, async getAllBzgsData(){ try{ let res = await gentlenessAll(); if(res && res.code==200) { this.allBzgsDatas = res.data; } } catch(err){ } }, async getAllDljyData(){ try{ let res = await getDljyjgckAll(); if(res && res.code==200) { this.allDljyDatas = res.data; } } catch(err){ } }, // 获取本周固收表专区数据 async gentlenessAll() { try { let res = await gentlenessAll(); if (res && res.code == 200) { this.sypjData = res.data.dateList; this.unRecheckNum_bzgs = Number(res.data.unRecheckNum); } } catch (err) { } }, //获取定制价格参考表专区数据 async getDljyjgckAll() { try { let res = await getDljyjgckAll(); if (res && res.code == 200) { this.dljyData = res.data.dateList; this.unRecheckNum_dljybj = Number(res.data.unRecheckNum); } } catch (err) {} }, getParamData(val){ let temp=this.paramValues && this.paramValues.filter(item => {return item.paraCode.toLowerCase()==val;}); return temp&&temp[0]; }, handleScroll(event) { // 获取滚动条当前位置 const scrollTop = event.target.scrollTop; // 在这里根据滚动位置进行相应的处理 }, tableRowClassName({ row, rowIndex }) { return rowIndex % 2 === 0 ? 'even-row' : 'odd-row'; }, onTabContentOne() { this.$router.push("/informationdisplay"); }, gspzCellStyle({ row, column }) { if (column.property === 'gspz') { return 'color: #FF3D3D;'; // 设置姓名列字体颜色为红色 } if (column.property === 'dbjg') { return 'color: #FF3D3D;'; // 设置姓名列字体颜色为红色 } }, handleHeaderEdit(prop, newValue) { this.$set(this.dynamicHeaders, prop, newValue) // 可添加保存到后端或localStorage的逻辑 }, saveHeader(prop) { // 保存到localStorage localStorage.setItem('sharedTableHeaders', JSON.stringify(this.dynamicHeaders)); // 触发自定义事件通知其他标签页 const event = new Event('tableHeadersUpdated'); localStorage.setItem('tableHeadersUpdateTime', Date.now()); window.dispatchEvent(event); } }, }; </script> <style lang="scss" scoped> // .iteration-businessflow { // min-width: 1600px; // } .el-link { color: #ffffff; } .el-link:hover { color: #0589fd; text-decoration: none; } .iteration-businessflow { box-sizing: border-box; width: 100%; height: 100%; background: #c0f0ff; transform: scale(var(--scaleww), var(--scalewh)); display: flex; flex-direction: column; transform-origin: 0 0; transition: 0.3s; z-index: 3; &__top { display: flex; justify-content: space-between; height: 70%; width: 100%; box-sizing: border-box; } } .no-zoom { transform: scale(var(1 / --scaleww), var(1 / --scalewh)); } .flex-center { height: 36px; display: flex; align-items: center; border-radius: 5px; background: #ffecc8; padding-left: 10px; } .flex-bettween { display: flex; align-items: center; justify-content: space-between; height: 35px; } .price-refer-box { // flex: 1; //padding: 10px; margin-bottom: 5px; margin-left: 5px; background: #fff; // min-width: 785px; width: 50%; height: 100%; background: rgba(255, 255, 255, 0.8); border-radius: 5px 5px 5px 5px; } .revenue-voucher { &__container { display: flex; flex-direction: column; background-size: cover; &:not(:first-child) { margin-top: 10px; } } &__item { //display: flex; //justify-content: space-around; white-space: nowrap; /* 防止内容换行 */ // overflow-x: auto; /* 启用水平滚动 */ overflow-y: hidden; /* 隐藏垂直滚动 */ display: flex; //height: 116px; height: 100%; width: 818px; justify-content: space-around; } &__header { margin-bottom: 10px; font-size: 14px; } &__title { position: relative; color: 30px; } &-position-title { position: absolute; top: 2px; left: 10px; color: #fff; } &-bg-photo { background-image: url("~@/assets/images/businessflow/businessflow2/bg_title.png"); background-repeat: no-repeat; background-size: contain; height: 30px; } &__content { padding-left: 10px; } } .price-refer { &__title { position: relative; color: 30px; // width: 100%; // display: flex; // justify-content: space-between; } &_right { width: 100%; // height: 576px; background: rgba(255, 255, 255, 0.8); border-radius: 5px 5px 5px 5px; .el-col-12 { width: 50%; } } &__content { padding-left: 10px; width: 100%; //min-width: 766px; } &__desc { margin: 5px 0; font-size: 14px; } &__wrap { display: flex; justify-content: space-between; width: 98%; max-height: 35%; //min-width: 775px; } &__table { flex: 5; width: 64%; //min-width: 635px; position: relative; } &_bc { background: #ffffff; margin-left: 5px; width: 19%; //min-width: 126px; height:225px; position: relative; // white-space: nowrap; /* 禁止文本换行 */ overflow: hidden; /* 隐藏超出容器的文本 */ text-overflow: ellipsis; /* 显示省略号 */ overflow: hidden; /* padding: revert; */ position: relative; } // &_tt{ // font-weight: 500; // } &__tbts{ background: #ffffff; margin-left: 10px; margin-top: 10px; width: 97%; //height: 100%; font-family: font-family; font-weight: 600; font-size: 14px; color: #303133; line-height: 22px; text-align: left; font-style: normal; } &__tip { // flex: 2; background: #ffffff; margin-left: 10px; margin-right: 10px; width: 93%; height: 100%; font-family: font-family; font-weight: 500; font-size: 14px; color: #303133; line-height: 22px; text-align: left; font-style: normal; text-transform: none; overflow: hidden; /* 超出隐藏 */ text-overflow: ellipsis; /* 省略号显示 */ display: -webkit-box; -webkit-line-clamp: 10; /* 显示最大行数 */ -webkit-box-orient: vertical; //overflow: auto; //max-height: 230px; } } .view-more-right{ float: right !important; } .price-refer__table{ // .el-table { // background-color: #dcedff; /* 你想要的颜色 */ // } .even-row { background-color: #FFFFFF; /* 偶数行的背景色 */ } .odd-row { background-color: #F5F7FA ; /* 奇数行的背景色 */ } .el-table .warning-row { background: #f5f7fa; } .el-table .success-row { background: #ffffff; } :deep(.el-table .el-input__inner) { background-color: rgb(220, 237, 255) !important; font-family: inherit; font-weight: 600; // font-size: 14px; // color: #303133; line-height: 22px; text-align: left; font-style: normal; border: none; padding: 0; } //隐藏滚动条 :deep(.el-table__body-wrapper) { &::-webkit-scrollbar { // 整个滚动条 width: 0; // 纵向滚动条的宽度 //overflow-x: auto; background: rgba(213, 215, 220, 0.3); border: none; } &::-webkit-scrollbar-track { // 滚动条轨道 border: none; } } :deep.el-table--scrollable-x .el-table__body-wrapper { // overflow-x: auto; } :deep(.el-table__body-wrapper::-webkit-scrollbar) { width: 4px; } // 设置滚动条的背景色和圆角 /deep/.el-table__body-wrapper::-webkit-scrollbar-thumb { //background-color: #ebebeb; border-radius: 8px; } :deep(.el-table th.gutter) { display: none; width: 0; } :deep(.el-table colgroup col[name="gutter"]) { display: none; width: 0; } :deep(.el-table__body) { width: 100% !important; } //隐藏滚动条 /deep/ .el-table .el-table__cell { padding: 3px 0; min-width: 0; -webkit-box-sizing: border-box; box-sizing: border-box; text-overflow: ellipsis; vertical-align: middle; position: relative; text-align: left; } } /deep/ .revenue-voucher__item::-webkit-scrollbar { // 整个滚动条 height: 0; // 纵向滚动条的宽度 // background: rgba(213, 215, 220, 0.3); border: none; } // .badge-item{ // position: absolute; // top: 0; // right: 20px; // transform: translateY(-20%) translateX(100%); // } </style>给这段代码中的el-table__body-wrapper取消overflow-x的auto
11-07
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值