css超出文字用省略号表示

css代码

//css
.name{width: 62px;display: inline-block; font-family: PingFangSC;color: #F7F6FD;                  white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
//html:  数据v-for遍历出来的
<div v-for="(item, index) in list" :key="item.id" class="item"><div class="name" v-if="item.name.length > 3"><el-tooltip class="nameBox" effect="dark" :content="item.name" placement="bottom-start"><span>{{ item.name }}</span></el-tooltip></div><div class="name" v-else><span>{{ item.name }}</span></div></div>

需求是，名字超过3个字，就显示3个字，多于3个，显示3个字并且显示省略号，鼠标悬浮显示全部名字，用到了elementUI中的tooltip,内容是后台返回，前端遍历的，就拿到遍历的值，加上类名就行.
省略号的样式代码为：
width:50px; //要加宽度，若是span等行内元素，加个display:inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

css超出文字用省略号表示相关推荐

css 超出文字显示省略号
这里写自定义目录标题单行省略号多行省略号单行省略号直接上代码 <!DOCTYPE html> <html lang="en"> <head&g ...
css超出一行添加省略号属性
css超出一行添加省略号属性:text-overflow和white-space 转自:http://caibaojian.com/css-white-space.html 通过使用text-over ...
php实现一行省略号,css实现文字溢出省略号的四种方法（附代码）
本篇文章给大家带来的内容是关于css实现文字溢出省略号的四种方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在项目中有涉及实现一行或者第几行后加省略号,在实现第几行后加 ...
css超出隐藏显示省略号
width: 300px; overflow: hidden;/*超出部分隐藏*/ text-overflow:ellipsis;/* 超出部分显示省略号 */ white-space: nowrap ...
CSS超出部分显示省略号
height: 76rpx; width: 300rpx; display: -webkit-box; /*设置为弹性盒子*/ -webkit-line-clamp: 2; /*最多显示3行*/ ov ...
css p 文本不换行，超出文字显示省略号
.text {// 文本强制不换行white-space: nowrap;// 文本溢出显示省略号text-overflow: ellipsis;// 溢出的部分隐藏overflow: hidden; ...
前端超出文字显示省略号
俩篇文章,360兼容模式.ie8可用(css) 原创: https://www.daqianduan.com/6179.html 实现方法: overflow: hidden; text-overfl ...
css 超出文字头尾相接滚动_前端的一些雕虫小技，从100%和滚动条说起
1.100%和滚动条当我们在css中把html和body同时设为100%时,会出现滚动条 html,body {width: 100%;height: 100%;} 原因是html和body之间有8 ...
CSS 超出部分显示省略号
文章目录单行超出显示省略号多行超出显示省略号单行超出显示省略号直接看代码: <!DOCTYPE html> <html lang="en"> < ...

css超出文字用省略号表示

css超出文字用省略号表示相关推荐

最新文章

热门文章