CSS'文本溢出:省略号' IE中的第二行无法正常工作

时间:2016-10-02 17:58:09

标签: css internet-explorer

我有一个有限的区域(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;
&#13;
&#13;

预期行为:

  1. 名字和姓氏不会太长 - 应该显示在一行中。
  2. 名字和姓氏足够长(但每个名字少于200 px) - 应该以两行显示
  3. 其中一个名称少于200px,另一个名称大于200px - 应显示在两行...中 - 在最长名称的行尾标记
  4. 两个名字各占两个以上 - 应该用...两行显示 - 行尾的标志
  5. 正如您所看到的,上面的代码符合Chrome和Firefox中的所有期望。但是它在IE中无法正常工作 - 它只是修剪第二行而不添加... - 符号。

    首选纯CSS解决方案。我有一个JS解决方案但是我的团队坚持使用纯CSS解决方案来解决这个问题。

1 个答案:

答案 0 :(得分:0)

为了text-overflow: ellipsis;工作,元素应该建立一个框 - 要么display:blockdisplay: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>