Flexbox list showing items with the remaining width, ellipsis, and additional content displayed on a separate line

Understanding the concept of flexbox has been a challenge for me as I try to learn. My goal is to create a list of emails, where each item is a flexbox container (see below).

https://i.sstatic.net/2s4YZ.png

Guidelines:

  • The tag is optional, but if shown, it appears directly next to the name.
  • The date is always included, with varying width.
  • The name of the person occupies the remaining space and is truncated if too long.
  • There is a 5px gap between the name and the tag.
  • The email subject is displayed on a new line and also truncated.

Check out my current progress here: 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>

htmlcssflexboxwidth

Answer №1

After making some adjustments to your code:

  1. I modified your flexbox to enable it to wrap by including flex-wrap: wrap in the li element

  2. To ensure that the subject appears on a new line, I set its width to occupy the entire row with flex-basis: 100%

  3. In order to position the date to the rightmost side, I added margin-left: auto

  4. To achieve the ellipsis effect for both name and subject, the following styles were applied:

      white-space: nowrap;
  overflow: hidden;

  5. Additionally, I included max-width: 50% for name to adjust the initial line.

Check out the 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>

Recommendation:

You may want to consider adjusting your markup by creating a wrapper for the first row which includes the name, tag, and date for a cleaner design (eliminating the unnecessary max-width: 50% previously used) - 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>

Answer №2

Expanding upon kukkuz's excellent response.

Here, we achieve the same outcomes without altering the markup. (It may be a bit more complex, but sometimes changing the markup is not an option).

The key is to eliminate flex-wrap and place the first 3 elements in a single row. One approach is to position the subject element outside of the flex container by using absolute positioning. The rest of the tweaks are only necessary to fix 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting: Sticky navigation menu shifts unexpectedly to the right upon sticking

Whenever the scroll bar on my website at travismorenz.com reaches the sticky menu, it slightly shifts the menu over a few pixels. This issue can be observed by scrolling down slowly and watching the menu. The sticky menu functionality is achieved using th ...

javascriptjqueryhtmlcss

H3 Element Without ASP Causing Disruption in Page Layout

Looking at my .aspx page, I have the following code: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="BootStrap.css" rel="stylesheet" type="text/css" /&g ...

htmlcssasp.nettwitter-bootstraptwitter-bootstrap-3

Obtaining the text content of a <div> element when clicked using Selenium

I am trying to extract the email address from the code snippet below, but I am unsure of how to do it. Any assistance would be greatly appreciated! <div class="taLnk hvrIE6 fl" onclick="ta.trackEventOnPage('Listing', 'Email', 774169 ...

javascriptjavahtmlselenium

The Jquery css on my website is not functioning properly

After creating a website feature where clicking on a specific div triggers an onclick event processing a chat_generate function, I encountered some issues. This funciton should insert HTML for the chat into a designated .open_div based on the id generated ...

javascriptphpjqueryhtmlcss

JavaScript - Dynamically loaded CSS: CSS variables are not immediately accessible to JavaScript, but are successfully evaluated within the CSS itself

I am encountering an issue with dynamically loading stylesheets via JavaScript into my application. Within these stylesheets, I have various CSS variables that I need to access and modify from my JavaScript code. When the stylesheets are directly embedded ...

javascripthtmlcsscss-variables

Unusual div image alignment when dimensions are dynamically adjusted with Javascript animations

I have created a basic webpage using JavaScript that aims to scale an element from the center of the page over time when clicked. It is functioning properly for the SVG element I tested it with. However, when I use an image, it initially appears outside o ...

javascripthtmlcssanimation

Display active button when switching content panels with jQuery upon page load

I have implemented a content panel switcher plugin from here, and with the help of code snippets found in previous posts, I was able to achieve active item highlighting when clicked. For reference, you can view the implementation here: http://jsfiddle.net ...

jqueryhtmlcss

stream a song with a font awesome symbol

Can an audio track be played using a font awesome icon, such as displaying the song name (mp3) with a play icon right next to it? When users click on the play icon, can the track start playing and be paused or stopped at will? The list will consist of app ...

javascripthtmlfont-awesomemp3

CSS: The grid-column and grid-row properties are malfunctioning

I'd like to create a grid with one column containing multiple rows of text, and the second column having an equal number of input rows. My initial plan was to create a grid where the number of rows equals the number of lines of text, and then define t ...

htmlcsscss-grid

Adjust the text to match the position of this sliding image

Currently, I am facing a challenge in aligning text to various images for a presentation slider. The issue arises due to the varying number of items and the need for text in both English and Spanish languages to be accommodated regardless of length (usuall ...

htmlcssbootstrap-4

Conceal the browser scrollbars

When I have two DIVs on my webpage that are larger than a browser window, it results in a horizontal scrollbar being displayed. How can I hide this browser scrollbar for the first DIV while still showing it for the second one? For example, if I have two ...

htmlcssscrollbar

Two child elements aligned vertically must adjust their heights to fill the entire height of the parent container, with both heights being dynamic

I am doubtful that this scenario can be achieved, but I am optimistic that someone will present a solution to prove me wrong. My parent element does not have a fixed height (though it could, although I don't believe it would help). Within this parent ...

htmlcsslayoutflexbox

Having difficulty aligning the SVG in the navbar component

Struggling with centering the SVG icon in a sideways navbar using React.js. Despite trying various solutions and researching similar issues, I can't seem to make it work. Any insights on why this is happening? Apologies if the solution is straightforw ...

cssreactjsbootstrap-4

Is using the <a> tag in HTML5 detrimental to SEO?

Recently, I've been experimenting with using the <a> tag as a container in HTML5. It's interesting to note that this tag can now have block elements as children. Take a look at this transformation: before (valid XHTML 1.1) <div> ...

htmlseo

An effective method for modifying the active class on an li element in jQuery and ensuring that the user is directed to the desired page upon clicking the li element

I am facing an issue with my script tag. When I click on the links test.php or test2.php, the active class changes from index.php to the respective file but I am not redirected to the clicked page. I have tried solutions from various sources but none of th ...

javascriptjqueryhtmlcss

Avoiding navigation bar overlap in CSS techniques

I have successfully implemented dropdown navigation with absolute positioning, but it is causing the left side to squash and the content above it to be hidden behind the navigation. Is there a way to prevent my navigation from overlapping other content wh ...

csshtml

Simply by loading Bootstrap, it is causing the animation parameters to become disrupted

Currently, I am experimenting with implementing a frontend code I discovered online for simulating a dice roll. If you are interested, you can find the code in this repository: https://codesandbox.io/s/xjk3xqnprw?file=/styles.css:0-4535 Here is the HTML ...

htmlcssbootstrap-4frontendbootstrap-5

Enhance the v-autocomplete dropdown with a personalized touch by adding a custom

Currently utilizing the v-autocomplete component from Vuetify, and I am interested in incorporating a custom element into its dropdown menu. You can see the specific part I want to add highlighted with a red arrow in this screenshot: This is the current s ...

javascripthtmlvue.jsautocompletevuetify.js

What is the method to verify if a pop-up browser window has completed its loading process?

There is a link on my website that opens a new window. However, sometimes the new window takes so long to load. To prevent users from clicking on the link before the new window finishes loading, I want to disable it until then. I am aware that one way to ...

javascripthtml

Looking to retrieve a specific data element within Vue.js?

Here's a thought-provoking query for you. Imagine I have some data stored in an element in the form of an array like this: data: { product: socks, variants: [ { variantId: 2234, variantColor: 'Green', varian ...

javascripthtmlcssvue.js