CODEWITHSUNDEEP
htmlcss
Óscar
Óscar

Reputation: 79

Having two spans on same line take all available space proportionally to their width

Is there a way to have two spans on the same line so that:

  1. If they overflow, ellipsis are added.
  2. The wider one takes more space than the smaller one.
  3. Both spans' width (and their parent) are variable.

You see in the code below that (2) and (3) are problematic because they don't take all available space.

Thanks in advance!

.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">[email protected]</span>
    </li>
    <li><span class="name">James</span>
      <span class="email">[email protected]</span>
    </li>
    <li><span class="name">Demetrius Washington Montgomery McGollinghgrahham</span>
      <span class="email">[email protected]</span>
    </li>
  </ol>
</div>

Upvotes: 2

Views: 521

Answers (1)

Fazil Abdulkhadar
Fazil Abdulkhadar

Reputation: 1101

I did 2 changes in your code. Added a display property to the <li> to flexbox. change the max-width of the .name, .email from 50% to 100%. Please see the updated code below.

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

See the Demo

Upvotes: 1

Related Questions