实现el-tooltip文字提示换行效果
参考以下地址
el-tooltip文字提示换行效果
文本超出显示…和提示语
<template>
<div>
<div class="demoBox">
<div class="header">头部</div>
<div class="top">顶部</div>
<div class="content">
<!-- 没有任何标签时 -->
<h3>没有任何标签时</h3>
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
<!-- 在P标签里时 -->
<h3>在P标签里时</h3>
<p>
12345678912345678912345678912345678912345678912345678912345678912345678
</p>
<!-- 用el-tooltip-包裹p标签-内容不换行-->
<h3>用el-tooltip-包裹p标签-内容不换行</h3>
<el-tooltip
class="item"
effect="dark"
:content="textData"
placement="top"
>
<p>
{{ textData }}
</p>
</el-tooltip>
<!-- el-tooltip内容换行 -->
<h3>el-tooltip内容换行</h3>
<el-tooltip class="item" effect="dark" placement="top">
<i class="el-icon-question smartTip"></i>
<div style="width: 200px" slot="content">
创建创意时从视频中自动抽取多帧图片优选生成封面，
本方案无需手动上传图片
</div>
</el-tooltip>
<ul>
<h3>li里没有标签-显示省略号-不显示提示语</h3>
<li>
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
</li>
<h3>li里有p标签-显示省略号-显示提示语</h3>
<li>
<el-tooltip
class="item"
effect="dark"
content="ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp"
placement="top"
>
<p>
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp
</p>
</el-tooltip>
</li>
<h3>li里有p标签-显示省略号-内容为data里的变量</h3>
<li>
<el-tooltip
class="item"
effect="dark"
:content="textData"
placement="top"
>
<p>
{{ textData }}
</p>
<!-- <h1>
{{ textData }}
</h1> -->
</el-tooltip>
</li>
<!-- <li>我有一个小太阳</li>
<li>我有一个小太阳</li>
<li>我有一个小太阳</li>
<li>我有一个小太阳</li>
<li>我有一个小太阳</li>
<li>我有一个小太阳</li>
<li>我有一个小太阳</li>
<li>我有一个小太阳</li>
<li>我有一个小太阳</li>
<li>我有一个小太阳</li>
<li>我有一个小太阳</li>
<li>我有一个小太阳</li>
<li>我有一个小太阳</li>
<li>我有一个小太阳</li>
<li>我有一个小太阳</li>
<li>我有一个小太阳</li> -->
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
textData:
'窗前明月光窗前明月光窗前明月光窗前明月光窗前明月光窗前明月光窗前明月光窗前明月光'
}
}
}
</script>
<style lang="scss" scoped>
* {
padding: 0;
margin: 0;
}
.demoBox {
overflow: hidden;
width: 400px;
height: 500px;
margin: 100px auto;
background-color: blue;
.header {
height: 50px;
background-color: red;
}
.top {
height: 60px;
background-color: pink;
}
.content {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; //多出部分以省略号形式隐藏
p {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; //多出部分以省略号形式隐藏
}
ul {
li {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; //多出部分以省略号形式隐藏
h1 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; //多出部分以省略号形式隐藏
}
}
}
}
}
</style>
