Creating an HTML file with a Windows-inspired icon and file name design using CSS

I searched everywhere on the internet but couldn't find a solution. If anyone knows of a similar link to my question, please share it with me.

I am trying to achieve a design similar to Windows icons and file names in HTML using CSS. Please refer to the attached image for an example. In this case, the file name is long and does not contain spaces, yet it is displaying properly.

File Name: 

robot_circuits_computer_technology_desktop_1680x1050_hd-wallpaper-967920.jpg

I have experimented with various CSS properties and tried different values and combinations of properties such as:

  • text-overflow: ellipsis;
  • overflow: hidden;
  • width: xxpx;
  • white-space: nowrap;
  • word-wrap: break-word;

htmlcss

Answer №1

When it comes to truncating text with an ellipsis using CSS, the text-overflow:ellipsis property is effective for single-line text.

However, if you want to add an ellipsis at the end of multi-line text, you will need to utilize a jQuery plugin.

Here are some examples:

  1. jQuery ellipsis

  2. jQuery dot dot dot

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

Am I on the right track in my understanding of how document and viewport relate to mouse position in JavaScript?

After reviewing responses from a previous inquiry, it is evident that both pertain to the x and y coordinates of mouse positions. In relation to the document and In relation to the viewport. I have delved into an article on QuirksMode, yet I feel ther ...

javascriptjqueryhtmlcss

How to ensure the table fits perfectly on the screen using JQueryMobile and Cordova?

I've been working on a JavaScript function that creates a dynamic page and displays data fetched from a database. However, I've encountered an issue where the displayed data overflows past the width of the mobile screen. Is there a way to ensure ...

javascriptjquerycsscordovajquery-mobile

Can someone provide guidance on creating a calculator using the Switch statement in Javascript?

Introduction to HTML: <div id="content"> <div id="calculator-container"> <form name="calc"> <!-- The form is named "calc" --> <label for="output">A Simple Calculator</label> & ...

javascripthtml

Issue with ASP.NET ConfirmButtonExtender Missing Background in Internet Explorer

Recently, I noticed an issue with the ConfirmButtonExtender on a Cancel button. It was working perfectly fine in Firefox with a semi-transparent background and a simple modal popup. But when I tested it on IE, it showed a generic JavaScript-style alert box ...

c#htmlcssasp.net-ajax

Create a responsive layout of inline-block elements that adjusts to resizing

I am currently focusing on developing the website found at: The progress so far includes successfully creating a list of div.project-item elements that adjust the number of columns based on window resizing due to the use of inline-blocks. My next goal is ...

htmlcsscss-float

Android: Substituting < p > and < br / > elements

My current situation involves receiving JSON data from a website and displaying it in a TextView. I have successfully achieved this, however, my boss requires the text to be plain with no paragraphs or empty lines. The text is retrieved from the website&a ...

androidhtml

employing iframes dynamically to overlay a webpage

I inserted this iframe into a webpage <iframe src='http://redbug.redrocksoftware.com.au:80/Pages/chamara.html' style="position:absolute;z-index:1;" ></iframe> The chamara.html page has a button that, when clicked, should cover the c ...

javascriptjqueryhtmlcssiframe

What is the best way to change the value of a div using JavaScript?

i could really use some assistance, i am trying to ensure that only the selected template is shown on the screen, while all others are hidden. The expected outcome should be to replace the values of: <div class="city">City<span>,< ...

javascripthtmlfunction

Enclose each instance of "Rs." with <span class="someClass">

I'm facing an issue with the currency symbol "Rs." appearing in multiple places on my website. I want to enclose every instance of this text within <span class="WebRupee">. However, if it's already wrapped in <span class="WebRupee">, ...

javascriptjqueryhtmlweb

What is the best way to gather the "name" and "value" attributes from a designated section of a form using JavaScript and store them in an array?

How can I extract the "name" and "value" attributes from a specific section of a form and store them in an array using JavaScript? Here is the section of the form in question: <div class="multiPickerForm"> <input type="text" name="Id" value="1"& ...

javascriptjqueryhtmlarraysobject

Creating dynamic visual effects for text on image with animation

I have created an animation where an image transitions from black and white to colored upon hover, accompanied by overlay text. However, when hovering over the text, the image reverts back to black and white. How can I ensure that the image stays in color ...

htmlcsstwitter-bootstrap

Tips for resolving div overlap issues when utilizing a customized div within a container-fluid layout (Bootstrap)

As a newcomer to HTML, CSS, and Bootstrap, I encountered an issue with overlapping divs when resizing the screen to be smaller. The problem arose when using container-fluid as a section and implementing a customized div for the section header. Despite atte ...

htmlcssbootstrap-4

Validating Forms with Jquery across Various Inputs

My HTML page includes multiple dynamically generated forms, ranging from 1 to 4 in number. I am looking for a way to validate each input field when the form is submitted. Below is the code I have: <script type="text/javascript"> $(document).re ...

jqueryhtmlforms

Divided Progress Indicators in Bootstrap 3

Looking to enhance user experience on my webpage by creating a progress bar for data entry. The goal is for users to enter 10 items before proceeding. The challenge I'm facing is developing a progress bar that accurately reflects the number of items ...

htmlcsstwitter-bootstraptwitter-bootstrap-3progress-bar

Flexbox Columns Maintaining Width when Window is Resized

My current challenge involves utilizing Flexbox to create a responsive layout with 5 boxes that shrink when the browser window is resized. However, 4 of these boxes are not reducing their width as expected when placed in columns. (Despite Bob behaving cor ...

cssflexboxresponsive-design

Eliminating unnecessary gaps caused by CSS float properties

I need help figuring out how to eliminate the extra space above 'Smart Filter' in the div id='container_sidebar'. You can view an example of this issue on fiddle http://jsfiddle.net/XHPtc/ It seems that if I remove the float: right pro ...

javascripthtmlcss

Using z-index to position a paragraph element behind other elements in a webpage

I am facing a challenge where I want to hide a paragraph within an element, and layer it behind another element. Despite my attempts with z-index, I have been unsuccessful in achieving this effect between the elements. Could someone shed some light on why ...

htmlcssz-indexstylesheet

Creating sequential numbers using jQuery

Recently, I worked on a script (credit to Chyno Deluxe) that generates a list of menu items based on what is written in the input box. However, I now have a new requirement which involves generating a sequence of numbers to be added continuously. Here is ...

javascriptjqueryhtmlcss

Reinitializing AngularJS form controls

Check out this codepen example: http://codepen.io/anon/pen/EjKqbW I'm trying to reset the form elements when the user clicks on "Reset". The div elements f1,f2,f3 should be hidden and the searchText box cleared. However, the reset button is not trig ...

javascriptjquerycssangularjsforms

What method is most effective for comparing two HTML pages that contain identical content but varied markup?

I'm in search of a method to analyze two HTML pages for content. Both pages were created with React, but they have different structures. Nevertheless, the text within these pages is identical. What would be the most effective approach for comparing th ...

htmljqueryangularjsreactjsjestjs