a标签超出部分隐藏以及设置inline-block后，不在同一水平线上的问题

今天在编写前端代码时，因为需求，需要将<a>标签超出部分隐藏。

在隐藏过程中遇到了一点小问题，顺便记录一下。

原样式：




1.隐藏<a>标签超出部分内容，并显示省略号

代码如下：

display:inline-block;
width: 500px;
overflow: hidden;
word-break: keep-all;
white-space: nowrap;
text-overflow: ellipsis;

display:inline-block是为了把内容显示在一行当中

overflow: hidden;

word-break: keep-all;

white-space: nowrap;

text-overflow: ellipsis;

以上四项则可以实现对超出部分的内容进行隐藏操作，注意：要设置width

效果如下图：






但是效果不是很满意，为什么呢？因为前面<a>标签和前面的标签不在同一水平线上，所以还需要修改。

在度娘查询一波后，发现vertical-align: top;可以实现我的要求，让两个标签能够在同一行显示。

width: 500px;
vertical-align: top;
display: inline-block;
overflow: hidden;
word-break: keep-all;
white-space: nowrap;
text-overflow: ellipsis;

vertical-aline 介绍：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

也就是说，我在这个元素 加了vertical-aline属性之后，其他和他同一行的带有inline 属性的元素就会根据vertical-aline的值来与他对齐。

于是在代码中添加上，达到我想要的效果，如下图：








这个样子就很完美了，正是我想要的结果。






个人博客:我的个人博客