文字对齐

195 阅读1分钟

在文字对方面以前遇到的是才用flex 定位等 我今天遇到的一个样式调了一整天才用以上方法都不行,效果是在一行的,但是上下还是有偏差,主要就是我左边的需要文字益处隐藏,左侧是span标签转化行内块标签,才能实现益处隐藏,但是转换后就是文字左侧和右侧的高低位置不同,导致样式不美观,最后用的是vertical-align: middle;属性解决了我的问题.

<span class="custom-title hidden">{{ item.examName }}</span>
.hidden {
  /* position: absolute; */
  display: inline-block;
  /* border: 1px solid red; */
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}