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

项目场景:

前端样式过长显示…后,却错位了
前端两个span一行展示错位了以及前端样式过长显示..._第1张图片


解决方案:

网上说的是: 其本质就是元素对齐方式默认是基于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;对其,一行展示。

你可能感兴趣的:(CSS,前端,javascript,css)