Question: Flexbox list with remaining width, ellipsis and some content on a new line

Question

Flexbox list with remaining width, ellipsis and some content on a new line

Answers 2
Added at 2017-01-05 18:01
Tags
Question

I'm trying to learn flexbox, but I'm struggling to understand the concept. I want to create a list of e-mails where every item is a flexbox container (see underneath).

example

Rules:

  • The tag is optional but if it is shown, it's shown directly next to the name.
  • The date is always there, the width varries
  • The Name of the person fills the remaining space. If it becomes to big it is truncated.
  • The space between the name and the tag is always 5px
  • The mail subject is shown on a new line and is also truncated

My attempt so far: https://jsbin.com/sepobipiwa/edit?html,css,output

.container {
  width: 350px;
  background-color: #FFF;
}
html {
  font-family: 'Nunito Sans', sans-serif;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  padding: 20px;
  border-bottom: 1px solid #ccc;
}
.name {
  font-size: 16px;
  font-weight: bold;
  text-overflow: ellipsis;
}
.tag {
  margin-left: 5px;
  font-size: 10px;
  font-weight: bold;
  background-color: #EFEFEF;
  padding: 3px 5px;
  border-radius: 3px;
  text-transform: uppercase;
}
.subject {
  font-size: 15px;
  font-weight: 300;
  color: #888;
  text-overflow: ellipsis;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800" rel="stylesheet">
  <title>JS Bin</title>
</head>

<body>
  <div class="container">
    <ul>
      <li>
        <div class="name">John Doe</div>
        <div class="date">14:50</div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="name">Marrie Antoinette</div>
        <div class="tag">Concept</div>
        <div class="date">16:01</div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="name">Someone with a long name</div>
        <div class="tag">tag</div>
        <div class="date">18:50</div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="name">Someone with a long name</div>
        <div class="tag">concept</div>
        <div class="date">yesterday</div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
    </ul>
  </div>
</body>

</html>

Answers to

Flexbox list with remaining width, ellipsis and some content on a new line

nr: #1 dodano: 2017-01-05 18:01

So I did this to your code:

  1. Made your flexbox to wrap by adding flex-wrap: wrap to the li

  2. Forced the subject to the next line by telling it to take the full available width in the row by giving it flex-basis: 100%

  3. Add margin-left: auto to place the date to the right-most end.

  4. To finish it up, you can add these styles to name and subject to get the ellispsis woking:

      white-space: nowrap;
      overflow: hidden;
    
  5. Also added max-width: 50% to name to adjust the first line.

See demo below:

.container {
  width: 350px;
  background-color: #FFF;
}
html {
  font-family: 'Nunito Sans', sans-serif;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: baseline;
  padding: 20px;
  border-bottom: 1px solid #ccc;
}
.name {
  font-size: 16px;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 50%;
}
.tag {
  margin-left: 5px;
  font-size: 10px;
  font-weight: bold;
  background-color: #EFEFEF;
  padding: 3px 5px;
  border-radius: 3px;
  text-transform: uppercase;
}
.subject {
  font-size: 15px;
  font-weight: 300;
  color: #888;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  flex-basis: 100%;
}
.date {
  margin-left: auto;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800" rel="stylesheet">
  <title>JS Bin</title>
</head>

<body>
  <div class="container">
    <ul>
      <li>
        <div class="name">John Doe</div>
        <div class="date">14:50</div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="name">Marrie Antoinette</div>
        <div class="tag">Concept</div>
        <div class="date">16:01</div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="name">Someone with a long name</div>
        <div class="tag">tag</div>
        <div class="date">18:50</div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="name">Someone with a long name</div>
        <div class="tag">concept</div>
        <div class="date">yesterday</div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
    </ul>
  </div>
</body>

</html>

Suggestion:

You should edit you markup and create a wrapper for the first row that contains the name,tag and date which is a better design (you can remove the untidy max-width: 50% used above) - see demo below:

.container {
  width: 350px;
  background-color: #FFF;
}
html {
  font-family: 'Nunito Sans', sans-serif;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: baseline;
  padding: 20px;
  border-bottom: 1px solid #ccc;
}
.name {
  font-size: 16px;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.tag {
  margin-left: 5px;
  font-size: 10px;
  font-weight: bold;
  background-color: #EFEFEF;
  padding: 3px 5px;
  border-radius: 3px;
  text-transform: uppercase;
}
.subject {
  font-size: 15px;
  font-weight: 300;
  color: #888;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  flex-basis: 100%;
}
.date {
  margin-left: auto;
}
.header {
  display: flex;
  width: 100%;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800" rel="stylesheet">
  <title>JS Bin</title>
</head>

<body>
  <div class="container">
    <ul>
      <li>
        <div class="header">
          <div class="name">John Doe</div>
          <div class="date">14:50</div>
        </div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="header">
          <div class="name">Marrie Antoinette</div>
          <div class="tag">Concept</div>
          <div class="date">16:01</div>
        </div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="header">
          <div class="name">Someone with a long name</div>
          <div class="tag">tag</div>
          <div class="date">18:50</div>
        </div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="header">
          <div class="name">Someone with a long name</div>
          <div class="tag">concept</div>
          <div class="date">yesterday</div>
        </div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
    </ul>
  </div>
</body>

</html>

nr: #2 dodano: 2017-01-06 09:01

Just an extension on kukkuz excelent answer.

Here , we are acheiving the same results, but without needing to change the markup. (Some how trickier, but sometimes you just can change your markup).

What you really need is to get rid of flex-wrap and set all the first 3 elements in a single row. One alternative is to set the subject element outside of the flex container, positioning it absolute. The remains of the modifications are only to recover the broken layout.

.container {
  width: 350px;
  background-color: #FFF;
}
html {
  font-family: 'Nunito Sans', sans-serif;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  padding: 20px 0px 40px 0px;
  margin: 0px 20px;
  border-bottom: 1px solid #ccc;
  position: relative;
}
.name {
  font-size: 16px;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.tag {
  margin-left: 5px;
  font-size: 10px;
  font-weight: bold;
  background-color: #EFEFEF;
  padding: 3px 5px;
  border-radius: 3px;
  text-transform: uppercase;
}
.subject {
  font-size: 15px;
  font-weight: 300;
  color: #888;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  flex-basis: 100%;
  position: absolute;
  bottom: 20px;
  max-width: 100%;
}
.date {
  margin-left: auto;
}
.header {
  display: flex;
  width: 100%;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800" rel="stylesheet">
  <title>JS Bin</title>
</head>

<body>
  <div class="container">
    <ul>
      <li>
        <div class="name">John Doe</div>
        <div class="date">14:50</div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="name">Marrie Antoinette</div>
        <div class="tag">Concept</div>
        <div class="date">16:01</div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="name">Someone with a long name</div>
        <div class="tag">tag</div>
        <div class="date">18:50</div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="name">Someone with a long name</div>
        <div class="tag">concept</div>
        <div class="date">yesterday</div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
    </ul>
  </div>
</body>

</html>

Source Show
◀ Wstecz