Question

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

如果它们溢出，则添加省略号。
较宽的一个比较小的一个占用更多的空间。
两个跨度＆＃39; width（及其父级）是可变的。

您在下面的代码中看到（2）和（3）存在问题，因为他们没有占用所有可用空间。

提前致谢！

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 1

我在您的代码中进行了2次更改。向<li>添加了一个显示属性到flexbox。将max-width的{{1}}从.name, .email更改为50%。请参阅下面的更新代码。

100%

请参阅Demo

在同一条线上有两个跨距，它们的宽度与所有可用空间成比例

1 个答案: