Multi-line flexbox list with text-overflow: ellipsis

Question

I would like to achieve the attached list style in HTML5/CSS.

The single-line items can easily be done using flexbox (see below). However, I cannot quite figure out how to achieve the double-line items: If I allow wrapping, the "List Item Title" will no longer be truncated (ellipsis)...

Should I use CSS grid? Or is that overkill?

Here is my flexbox-single-line-implementation:

ul {
  padding: 0;
  border: 1px solid red;
  list-style-type: none;
}

li {
  display: flex;
  margin: 0;
  border-bottom: 1px solid gray;
}
    
div.icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 15px;
  background-color: lightcoral;
}

span.title {
  flex-grow: 1;
  flex-shrink: 1;
  margin: 15px;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}

span.tag {
  flex-shrink: 0;
  margin: 15px;
}

span.second-line {
  margin: 15px;
}

<ul>
    <li>
      <div class="icon"></div>
      <span class="title">List Item Title</span>
      <span class="tag">Some tag</span>
    </li>
    <li>
      <div class="icon"></div>
      <span class="title">Very Super Long List Item Title With Added Characters to Ensure Truncation</span>
      <span class="tag">Some tag</span>
    </li>
    <li>
      <div class="icon"></div>
      <span class="title">List Item Title</span>
    </li>
  </ul>

https://stackoverflow.com/q/33058004/3597276 – Michael Benjamin Jun 18 '18 at 12:44 — Michael Benjamin, Jun 18 '18 at 12:44

score 0 · Answer 1 · edited Jun 18 '18 at 11:49

You can achieve the result by using two child Div's inside li and have separate Flex for both child Div's instead having in li. Find the code below which works for me.

Code:

ul {
  padding: 0;
  border: 1px solid red;
  list-style-type: none;
}

li {
  margin: 0;
  border-bottom: 1px solid gray;
}

div.icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 15px;
  background-color: lightcoral;
}

span.title {
  flex-grow: 1;
  flex-shrink: 1;
  margin: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

span.tag {
  flex-shrink: 0;
  margin: 15px;
}

span.second-line {
  margin: 15px;
}

.mainHeading {
  display: flex;
}

.subHeading {
  display: block;
}

<ul>
  <li>
    <div class="mainHeading">
      <div class="icon"></div>
      <span class="title">List Item Title</span>
      <span class="tag">Some tag</span>
    </div>
  </li>
  <li>

    <div class="mainHeading">
      <div class="icon"></div>
      <span class="title">Very Super Long List Item Title With Added Characters to Ensure Truncation</span>
      <span class="tag">Some tag</span>
    </div>

    <div class="subHeading">
      <span class="title">List Item Sub Title</span>
      <span class="tag">Some another tag</span>
    </div>


  </li>
  <li>
    <div class="mainHeading">
      <div class="icon"></div>
      <span class="title">List Item Title</span>
    </div>
  </li>
</ul>

Multi-line flexbox list with text-overflow: ellipsis

1 Answers1