html - 在同一条线上有两个跨度占用所有可用空间与其宽度成比例

Question

有没有办法在同一行上有两个跨度，以便:

1. 如果溢出，则添加省略号。
2. 较宽的比较小的占用更多空间。
3. 两个 span 的宽度(及其父级)都是可变的。

您在下面的代码中看到 (2) 和 (3) 是有问题的，因为它们没有占用所有可用空间。

提前致谢!

.box {
  border: solid 1px #444;
  padding: 5px;
  font-family: sans-serif;
}
li {
  white-space: nowrap;
  font-size: 16px;
  border: solid 1px #def;
  padding: 0.5em;
  background: #dfefff;
  margin-bottom: 0.5em;
}
span {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.name {
  color: #259;
}
.email {
  color: #581;
}
.name,
.email {
  max-width: 50%;
}

<div class="box">
  <ol>
    <li><span class="name">Demetrius Washington Montgomery McGollinghgrahham</span>
      <span class="email">demetrius.washington@gmail.com</span>
    </li>
    <li><span class="name">James</span>
      <span class="email">demetrius.washington.also.james.lomg@gmail.com</span>
    </li>
    <li><span class="name">Demetrius Washington Montgomery McGollinghgrahham</span>
      <span class="email">a@b.com</span>
    </li>
  </ol>
</div>

Answer 1

我对您的代码做了 2 处更改。向 <li> 添加了显示属性到 flexbox。更改 max-width的 .name, .email来自 50%至 100% .请参阅下面的更新代码。

li {
  white-space: nowrap;
  font-size: 16px;
  border: solid 1px #def;
  padding: 0.5em;
  background: #dfefff;
  margin-bottom: 0.5em;
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex; 
}

.email {
  color: #581;
  margin-left:5px;
}

.name,
.email {
  max-width: 100%;
}

参见 Demo