1、单行文本省略：
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;2、多行文本省略：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;注：英文自动换行：
word-wrap:break-word;
word-break:break-all;3、Vue中实现鼠标移入，省略号的内容全部显示：
（1）Vue的ElementUI组件
<p>{{item.title}}</p>
改为：
//法1
<el-tooltip :content="item.title" placement="top-start">
<p>{{item.title}}</p>
</el-tooltip> //悬浮层显示全部内容
//法2
<p :title="item.title">{{item.title}}</p>（2）Table表格
<el-table-column prop="name" label="姓名" :show-overflow-tooltip="true">
//:show-overflow-tooltip="true" //悬浮层显示全部内容4、html实现省略号全部显示：
<div title="11111">11111</div> //title属性（title的内容与该内容相同）悬浮层显示全部内容5、css实现省略号全部显示：
// 1、设置:hover
h4{
overflow: hidden; // 溢出隐藏
white-space: nowrap; // 禁止换行
text-overflow: ellipsis; //...
}
h4:hover{
width:200px;
overflow: visible;
white-space: pre-line;
cursor:pointer;
}
2、display：block与display：none
本资源由随笔博客发布。发布者：五维国度，转载请注明出处：http://blog.suibi.site/archives/4050
本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
微信扫一扫 
