css实现省略号...及悬浮层显示全部内容的方法

overflow: hidden;//溢出隐藏
white-space: nowrap;//禁止换行
text-overflow: ellipsis;//...

display: -webkit-box;//谷歌
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;//显示几行
overflow: hidden;

word-wrap:break-word;
 word-break:break-all;

<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>

<el-table-column prop="name" label="姓名" :show-overflow-tooltip="true">
//:show-overflow-tooltip="true"    //悬浮层显示全部内容

<div title="11111">11111</div>    //title属性（title的内容与该内容相同）悬浮层显示全部内容

h4{
 overflow: hidden;//溢出隐藏
 white-space: nowrap;//禁止换行
 text-overflow: ellipsis;//...
}
h4:hover{
 width:200px;
 overflow: visible;
 white-space: pre-line;
 cursor:pointer;
}

本文来自投稿，不代表站三界导航立场，如若转载，请注明出处：https://www.zhansanjie.com/article/details/8345.html