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>{{}}</p>
改为:
//法1
<el-tooltip :content="" placement="top-start">
<p>{{}}</p>
</el-tooltip> //悬浮层显示全部内容
//法2
<p :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