Question

我有一个有限的区域（width: 200px）来显示全名。我必须遵循这样的html结构（DIV中的两个SPAN）：

＆＃13;

.fullName {
  width: 200px;
  border: 1px solid red; 
  overflow: hidden;
  text-overflow: ellipsis;
}

＆＃13;

<div class="fullName">
  <span class="firstName">
    AlbertAlbertAlbertAlbertAlbertAlbertAlbertAlbert
  </span>
  <span class="lastName">
    EinsteinEinsteinEinsteinEinsteinEinsteinEinstein
  </span>
</div>

＆＃13;

预期行为：

名字和姓氏不会太长 - 应该显示在一行中。
名字和姓氏足够长（但每个名字少于200 px） - 应该以两行显示
其中一个名称少于200px，另一个名称大于200px - 应显示在两行...中 - 在最长名称的行尾标记
两个名字各占两个以上 - 应该用...两行显示 - 行尾的标志

正如您所看到的，上面的代码符合Chrome和Firefox中的所有期望。但是它在IE中无法正常工作 - 它只是修剪第二行而不添加... - 符号。

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

Answer 1

为了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>

CSS＆＃39;文本溢出：省略号＆＃39; IE中的第二行无法正常工作

1 个答案: