Clip the text with ellipsis if it exceeds the limit and show the file

Currently working on an upload feature where I need to show the name of the uploaded file.

File Name.txt

The problem arises when the name is too lengthy, resulting in a display like this:

File Name Is Too Long...txt

I attempted to solve this by implementing ellipsis:

.file-name {
 overflow: hidden;
 text-overflow: ellipsis
}

However, I am facing issues with handling the file extension.

Answer №1

Successfully utilized flexbox to achieve this:

.filename {
  max-width: 200px;
  display: flex;
}

.name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
<div class="filename">
  <span class="name">File Name Is Too Long.</span>
  <span class="extension">txt</span>
</div>
<div class="filename">
  <span class="name">This filename is also too long.</span>
  <span class="extension">txt</span>
</div>

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

Namespace SyndicationElementExtension refers to

I'm trying to achieve the following output: <someNSalias:full-text>Good news everyone!</someNSalias:full-text> This is the code I have written: var element = new SyndicationElementExtension(field.Name, field.HasNamespace ? RssNs : strin ...

Retrieving specific values for each key in JSON using PHP

Looking for a solution with PHP to extract specific information from JSON files based on set criteria. Here is an example of part of the JSON data: "Main": [{ "count": 7, "coordinates": [89,77], "description": "Office", },{ "count": 8, ...

Using CSS or Javascript, you can eliminate the (textnode) from Github Gist lists

My goal is to extract the username and / values from a series of gists on Github Gists. The challenge lies in the fact that there are no identifiable classes or IDs for the / value. https://i.stack.imgur.com/9d0kl.png Below is the HTML snippet with a lin ...

Choose different components that possess the X designation

Can X number of elements (h1, p, span...) be modified only if they have a specific class? I'm searching for a solution like this: (elem1, elem2, elem3, elem4).class { /* add customization here */ } I previously attempted using parentheses, curly b ...

Dynamic sliding effect in CSS for seamless showing and hiding of div elements

I stumbled upon a fantastic solution in these forums How to create sliding DIV on click? However, what I really wanted was for the content to fade in and out with just a click of a button. Here is the code snippet I am currently working with: <html> ...

Adjust google maps to fill the entire vertical space available

I found this helpful resource for integrating Google Maps into my Ionic app. Everything is working smoothly, but I am trying to make the map fill the remaining height below the header. Currently, I can only set a fixed height in pixels like this: .angula ...

Display additional content button, dynamic div identification

I've created a small script that includes a "show more" button at the end of displaying 10 entries. Here is the code: <div id="more<?=$lastid;?>"> <a onclick="showmore(<?=$lastid;?>);">More</a> </div> And here ...

Why is my background image also rotating when I rotate the text using 'transform: rotate'?

I have been attempting to rotate text on a background-image, but I am facing an issue where my background image also moves with the text rotation. Can someone explain why this is happening? Below is the code snippet: HTML code snippet: <ul> <li ...

Apply the CSS property to all divs with a shared class using jQuery

I am facing an issue with applying the CSS property 'z-index:99' to multiple divs that have the same class name. I want this CSS to be applied when clicking on a play button using jQuery. Currently, it only works for the first Play Button and I w ...

JavaScript Issue Causing Jquery Carousel Dysfunction

I am having trouble with the slider I created using JS Fiddle. The link to the slider is not working and I need some assistance. Click here for the slider <div class="row"> <div id="myCarousel" class="carousel slide vertical"> &l ...

Displaying tooltips with ngx-charts in Angular

Currently, I am working on developing a unique legend component that features individual material progress bars for each data entry. My goal is to display the pie chart tooltip when hovering over any of the entries within this custom legend. Below is a sn ...

Sending data from a form to a PHP script via a variable transfer

i have a form structured like this: <form action="del.php" method="post" enctype="multipart/form-data"> Number of field to display:<input type="text" name="limit" /><br /><br /> Top category: <select name="topcat"> <opt ...

Leveraging JQueryUI for an audio Seek feature, and dynamically connecting a fresh slider to the <audio> element whenever a song is swapped out

Thanks for taking a look at my question. The code snippet can be found HERE. I'm in the process of creating an audio player to handle multiple songs on a single page using JQueryUI Slider and HTML5 Audio, with one Audio element and several sliders. ...

I am looking to transfer the value of one textbox to another textbox within a dynamic creation of textboxes using JavaScript

var room = 1; function add_fields() { room=$('#row_count').val()-1; room++; var objTo = document.getElementById('education_fields'); var divtest = document.createElement("div"); divtest.setAttribute("class", "form- ...

Displaying information from an array using AngularJS

I'm struggling to display data from an array and I could use some help. Here's a snippet from my service.js file: this.fetchData = function() { var myArray = $resource('url', {method: 'get', isArray: true}); myArray ...

Utilizing Modernizr for detecting support of background-clip:text functionality

Recently, I decided to utilize Modernizr in order to check for support of the css property background-clip: text. After some research, I came across this page:https://github.com/Modernizr/Modernizr/issues/199 I then added the following code to my website ...

Issue with Firefox not entering FullScreen when using the userChrome.css file

1) Below is a screenshot of my customized Firefox interface. After tweaking my userchrome.css file to remove tabs, I noticed a large empty space at the bottom of the browser window that I cannot seem to get rid of. Despite trying various solutions, I have ...

Issues with jQuery compatibility when used alongside HTML and CSS

My coding tool is flagging errors in my JavaScript file, including: -'$' usage before definition. -Incorrect spacing between 'function' and '(' This is the content of my JS file: $(document).ready(function() { $(window).s ...

PHP MySQL outputting data in a dropdown menu format

Struggling to extract data from a database and display it as a dropdown list. I am fetching the foreign key, its unique code, and its name/title to be displayed in a dropdown list for input into a new table. $sql = "SELECT quali_code, title FROM ...

What is the best way to populate a textarea element in Jade with text without any whitespace?

My current solution is functioning perfectly: textarea. #{myObject.myVar} Despite the success, Jade throws a warning when compiling the file: Cannot read property 'myVar' of undefined This warning makes sense since myObject may not be p ...