我有一个有限的区域(width: 200px
)来显示全名。我必须遵循这样的html结构(DIV中的两个SPAN):
.fullName {
width: 200px;
border: 1px solid red;
overflow: hidden;
text-overflow: ellipsis;
}

<div class="fullName">
<span class="firstName">
AlbertAlbertAlbertAlbertAlbertAlbertAlbertAlbert
</span>
<span class="lastName">
EinsteinEinsteinEinsteinEinsteinEinsteinEinstein
</span>
</div>
&#13;
预期行为:
...
中 - 在最长名称的行尾标记...
两行显示 - 行尾的标志正如您所看到的,上面的代码符合Chrome和Firefox中的所有期望。但是它在IE中无法正常工作 - 它只是修剪第二行而不添加...
- 符号。
首选纯CSS解决方案。我有一个JS解决方案但是我的团队坚持使用纯CSS解决方案来解决这个问题。
答案 0 :(得分:0)
为了text-overflow: ellipsis;
工作,元素应该建立一个框 - 要么display:block
或display:inline-block
,请尝试这个:
<span>
默认为display:inline
。
.fullName {border: 1px solid blue; width:50%}
.fullName > span {
max-width:100%;
border: 1px solid red;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
<div class="fullName">
<span class="firstName">
AlbertAlbertAlbertAlbertAlbertAlbertAlbertAlbert
</span>
<span class="lastName">
EinsteinEinsteinEinsteinEinsteinEinsteinEinstein
</span>
</div>