PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
No Result
View All Result
Home Web Dev

Using Flexbox and text ellipsis together · Leonardo Faria

July 21, 2020
in Web Dev
289 3
Using Flexbox and text ellipsis together · Leonardo Faria


Another day I was asked to build a table containing a list of files uploaded by the users. Imagine a table similar to the list of files in Finder:

Finder

The second item of the table is mobile-phone-screenshot-long-fine-name.png, however the column is not big enough to show the complete filename. Instead, we see mobile-phone-sc...g-fine-name.png. In this project, we decided to cut part of the end of the filename and keeping the extension, as shown above:

Finder

HTML markup:

<div class="filename">
  <span class="filename__base">this-file-has-a-really-really-really-long-filename.</span>
  <span class="filename__extension">pdf</span>
</div>

CSS:

.filename {
  display: flex;
  min-width: 0;
}

.filename__base {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.filename__extension {
  flex-shrink: 0;
}

The ellipsis effect can be done by combining text-overflow, white-space and overflow properties, however, we still need to figure out the relation between the filename base and its parent, which also contains the file extension.

The trick is using the property min-width, as covered in this pen by AJ Foster and CSS Tricks. From the Flexbox spec:

Note: The auto keyword, representing an automatic minimum size, is the new initial value of the min-width and min-height properties. The keyword was previously defined in this specification, but is now defined in the CSS Sizing module.

&mldr;

In general, the content-based minimum size of a flex item is the smaller of its content size suggestion and its specified size suggestion.

By using min-width: 0, we are changing the minimum size of the flexbox container, which will resize the child elements of the container that don’t use the flex-shrink attribute. Since the filename base element has the text-overflow, white-space and overflow properties, the ellipsis will be rendered properly.

The full example is available in this Codepen:



Source link

Share219Tweet137Share55Pin49

Related Posts

On Auto-Generated Atomic CSS | CSS-Tricks
Web Dev

On Auto-Generated Atomic CSS | CSS-Tricks

Robin Weser’s “The Shorthand-Longhand Problem in Atomic CSS” in an interesting journey through a tricky problem. The point is...

January 15, 2021
How to Add Commas Between a List of Items Dynamically with CSS
Web Dev

3 Approaches to Integrate React with Custom Elements

In my role as a web developer who sits at the intersection of design and code, I am drawn...

January 15, 2021
Community Resources, Weekly Newsletter, And Boosting Skills Online — Smashing Magazine
Web Dev

Smashing Workshops & Audits — Smashing Magazine

About The AuthorJuggling between three languages on a daily basis, Iris is known for her love of linguistics, arts,...

January 15, 2021
4 Lessons Web App Designers Can Learn From Google — Smashing Magazine
Web Dev

The Report — Smashing Magazine

About The AuthorSuzanne Scacca is a former WordPress implementer, trainer and agency manager who now works as a freelance...

January 15, 2021
Next Post
The AWS Serverless Application Model CLI is now generally available : idk.dev

The AWS Serverless Application Model CLI is now generally available : idk.dev

Configuring custom domain names with AWS Chalice : idk.dev

Configuring custom domain names with AWS Chalice : idk.dev

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended

Sawfish phishing campaign targets GitHub users

Sawfish phishing campaign targets GitHub users

May 23, 2020
ZX Origins (fonts) [link]

ZX Origins (fonts) [link]

June 8, 2020
Building and querying the AWS COVID-19 knowledge graph : idk.dev

Building and querying the AWS COVID-19 knowledge graph : idk.dev

June 3, 2020
When I took a break from work

When I took a break from work

November 15, 2020

Categories

  • AWS
  • Big Data
  • Database
  • DevOps
  • IoT
  • Linux
  • Web Dev
No Result
View All Result
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In