- 工作过程中遇到这种情况:鼠标移入一个点,会弹出文字提示显示这个点的名称,移出后会隐藏这样的
- 而在tooltip文字提示中,一般都是从中间开始会随着字量的增多向两边展伸,并不是从左向右的那样。
- 这里写一下我自己的方式
- 首先,文字向两边延伸,必须要有一个大的盒子将文字标签包括。
- 然后将文字内容标签在这个大盒子中居中
- 文字内容在文字标签中居中或则用padding…
我要自己记录下来
<div>
<p class="reveal">过一会就讨厌今天有人</p>
</div>
div{
width: 100vw;
background-color: transparent;
}
.reveal{
display: inline-block;
color: #FFFFFF;
line-height: 34px;
padding: 0 28px;
background-color: #303133;
position: relative;
left: 50%;
transform: translateX(-50%);
}
效果