I don't want to miss the kabab ... don't be two lines away from each side, only 20%

Question

I can not write a two-line box and it will be relatively continuous enter image description here

hr.hr-text {
margin:20px;
position: relative;
border: none;
height: 1px;
background: #999;

}

hr.hr-text::before {
    content: attr(data-content);
    display: inline-block;
    background: #fff;
    font-weight: bold;
    font-size: 0.85rem;
    color: #999;
    border-radius: 30rem;
    padding: 0.2rem 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
  transform: translate(-50%, -50%);
}

Answer 1

add white-space: nowrap;

hr.hr-text::before {
    white-space: nowrap;
    content: attr(data-content);
    display: inline-block;
    background: #fff;
    font-weight: bold;
    font-size: 0.85rem;
    color: #999;
    border-radius: 30rem;
    padding: 0.2rem 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
  transform: translate(-50%, -50%);
}