带有文本溢出的多行flexbox列表：省略号

Question

我想在HTML5 / CSS中实现附加的列表样式。

使用flexbox可以轻松完成单行项目（见下文）。但是，我无法弄清楚如何实现双线项目：如果我允许包装，那么＆＃34;列出项目标题＆＃34;将不再被截断（省略号）......

我应该使用CSS网格吗？或者这有点矫枉过正？

这是我的flexbox-single-line-implementation：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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>