文字向两边延伸案例

• 工作过程中遇到这种情况：鼠标移入一个点，会弹出文字提示显示这个点的名称，移出后会隐藏这样的
• 而在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%);
}

效果