前端两个span一行展示错位了以及前端样式过长显示...

项目场景：

前端样式过长显示…后，却错位了

---

解决方案：

网上说的是： 其本质就是元素对齐方式默认是基于baseline的,由于第一个span包含了文本，所以baseline就在文本与相邻的span底部区域，导致表现出来的错位，可以设置span{vertical-align: top;}统一对齐方式即可。

<span style="margin-right:31px;padding-left:18px;">项目名称</span>   
<span class="project-name-style" :title="projectInfo.name">{
    
    {
    
    projectInfo.name}}</span>

.project-name-style{
    
    
    display: inline-block;
    width: 360px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

说明：

1、宽度一定要设置，可以根据实际需求调整。

2、white-space: nowrap是禁止文字折行。

3、text-overflow表示当文本溢出时是否显示省略标记，有两个值：

clip：不显示省略标记（…），而是简单的裁切。

ellipsis：当对象内文本溢出时显示省略标记（…）

4、overflow:hidden表示溢出内容为隐藏。

5、vertical-align: top;对其，一行展示。