Css 对齐选项卡标题中的长文本

我试着做一个标签标题，它是一个标题列表，有时标题太长，中间有“-”。因此，为了节省空间，我将br添加到特征线

1/问题是“-”符号之间的上下距离太大，有没有办法解决？ 这是设置br tag的正确方法，还是应该为特征线的每个li设置最大宽度

希望这对您有所帮助：

ul li {
    font-size: 1.4rem;
    color: red;
    max-width: 120px;
    padding: 10px;
    vertical-align: middle;
    text-align: center;
    /* padding: 0 5px; */
    display: inline-block;
    margin-right: 14px;
}

  div {width: 80%; margin: 0 auto;}
  ul {
     list-style: none;
     /* display: table; */
     width: 100%;
     padding: 0;
     margin: 0;
  }
  ul li {
     position: relative;
     font-size: 1.4rem;
     /* display: table-cell; */
     color: blue;
     text-align: center;
     display: inline-block;
     margin-right: 20px;
  }

ul li {
    font-size: 1.4rem;
    color: red;
    max-width: 120px;
    padding: 10px;
    vertical-align: middle;
    text-align: center;
    /* padding: 0 5px; */
    display: inline-block;
    margin-right: 14px;
}