Ellipsis malfunctioning in text overflow

It is known that the display type table-cell does not work with text-overflow ellipsis. However, this is where my issue lies.

I am dealing with a file input control that appears like this:

<div class="ui-select form-input" style="display:inline-block; margin-right:5px; margin-bottom:-8px;width:400px;">
    <span class="input-group-btn">
        <label class="btn btn-info btn-file" for="multiple_input_group">
            <div class="input required">
                <input id="multiple_input_group" type="file" multiple name="files" ng-files="getTheFiles($files)">
            </div> Browse
        </label>
    </span>
    <span class="file-input-label" ng-model="fileName"></span>
</div>

When you select a file, the file name should be displayed on the span element.

The CSS code for this looks like :

.file-input-label {
    padding: 0px 10px;
    display: table-cell;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
}

Problem arises when a long file name is selected, causing the span element to expand without showing ellipsis...

I have attempted changing the display to block but it negatively affects the UI:

.file-input-label {
    padding: 0px 10px;
    display: block;
    width: 400px;
    height: 20px;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
}

This made the elements no longer inline...the browse button and the span are now misaligned.

Even using display: inline-block did not provide a satisfactory solution:

.file-input-label {
    padding: 0px 10px;
    display: inline-block;
    white-space: nowrap;
    width: 400px;
    height: 30px;
    vertical-align: middle;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
}

I even tried setting the display property of the span element:

<span class="input-group-btn" style="display: inline-block;">

Unfortunately, this approach resulted in the following outcome:

https://i.sstatic.net/cBoKH.png

What corrections need to be made here?

Answer №1

If you're struggling with text-overflow ellipsis in a table-cell display, try using inline-block instead:

.file-input-label {
    padding: 0px 10px;
    display: inline-block;
    white-space:nowrap;
    vertical-align: middle;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow:hidden;
    text-overflow:ellipsis;
}

To achieve ellipsis in a table-cell display, consider utilizing various CSS rules such as width and table-layout.

Check out these Google search results for more information: text overflow on table-cell display.

Answer №2

If you're hesitant to modify the display: table-cell property, you can utilize the max-width: 0 technique for a cell. This enables you to define something in the table where the text-overflow property can be implemented. Here is how you should adjust your code:

.file-input-label {
    padding: 0px 10px;
    display: table-cell;
    white-space:nowrap;
    vertical-align: middle;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width: 0; /** only change required here **/
}

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

"Want to make a phone call with an extension? Just click here

The issue at hand is rather straightforward. Is there a way to create a link for mobile browsers that would automatically dial a phone number and input an extension without requiring any action from the user? I am familiar with using tel:, as well as spe ...

Using Javascript to dynamically retrieve accordion content from a dynamically generated ID

I am currently working on developing a more intricate accordion feature. The accordion will consist of 4 buttons (section 0-3) with unique content (lorem ipsum 0-3). Clicking on "section 0" should reveal "lorem ipsum 0", while clicking on "section 1" shoul ...

Ways to enable users to showcase the files they have uploaded

I've successfully implemented code for file uploading. When saving the uploaded file in the database, I retrieve the uploader's username from another database. Additionally, I have a page that displays all uploaded files, functioning perfectly. N ...

Troubleshooting Vue.js nested v-for with <tr> tag problem

Why does Vue complain about undefined properties when I try nesting a <tr> inside a <tr> with a v-for binding on each? <table> <thead></thead> <tbody> <tr v-for="item in items"> <td>{{ item.nam ...

Having an issue with my JavaScript burger menu not functioning properly

I'm really struggling to figure out why my code isn't working. I've checked and rechecked all the links, and everything seems correct. Could it possibly be because the code is outdated? I've been stuck on this for two days now and can&a ...

Using CSS3 to shift a div in relation to another moving div

Take a look at this JSfiddle. I am trying to make the "Push this!" div move when the menu resizes/expands on hover. Is it possible to achieve this effect using only CSS? <div id="nav"> <ul> <li><a href=""><span>01</spa ...

CSS for two columns with a width of 50% each

Below is a table for reference: <table width="100%"> <tr> <td id="td1"></td> <td id="td2"></td> <td id="td3"></td> <td id="td4"></td> </tr> </table> Is there a wa ...

What is the best way to show and hide text by toggling a link instead of a button?

I need help with toggling between two different texts when a link is clicked. I know how to achieve this with a button in JQuery, but I'm not sure how to do it with a link. <h1>Queries and Responses</h1> <p>Query: What is the larges ...

Guide on generating a video thumbnail using JavaScript Application

Searching for a way to easily create a thumbnail from a video for uploading alongside the video itself to a server? I've been looking for JavaScript libraries to simplify the process without much luck. The scenario involves the user selecting a video ...

exploring div element(s) with jQuery

My HTML page contains multiple div elements in the body. I have also included buttons with associated click functions in jQuery to change the background-color of a div element based on the button pressed. However, I'm facing an issue at the 'term ...

Tips for dynamically loading a modal

Hello, I am curious about dynamically loading modals on different images within my current webpage. https://i.sstatic.net/yhTgs.png For example, when the life of Pi image is clicked, a modal pops up displaying relevant information. https://i.sstatic.net ...

Is misbehavior expected at approximately 600 pixels in width?

What is happening with my website when the width is minimized, and how can I resolve it? Issue The website appears fine on mobile devices and full screens, but at reduced sizes, the background image disappears and the top bar behaves strangely (with the l ...

Tips for filling in the values for the options in a select dropdown menu

Currently, I am facing a strange bug related to the select element. Whenever I open the dropdown, there is always a mysterious black option at the top. This is how my HTML looks like: This particular element is part of my test controller. <select ng- ...

Is there anyone who can provide a comprehensive explanation for what is going on here?

{ // Let's figure out how to launch my HTML file as a webpage in Chrome. "version": "0.2.0", "configurations": [ { "type": "pwa-chrome", &q ...

Four-pointed star design with rounded edges

https://i.sstatic.net/E3ZFb.png My goal is to create a pixel-perfect star using CSS. I have attempted to achieve this so far, but the star currently has 5 points and I would like it to only have 4 points. Additionally, I am looking for a way to make the c ...

In-line divs are known for their rebellious nature, refusing to conform to traditional

I'm in need of some assistance with taming my unruly HTML. It seems to be misbehaving lately. The content area on the page I'm currently designing has a two-column layout. Instead of using separate containing divs for each column, I opted for a ...

pause in execution between iterations of a for loop

Challenge I'm currently working on a function that processes a list of strings by printing each one on a new line, with CSS animations that gradually display the string over a few seconds. However, I'm struggling to make sure that the next strin ...

What is the best way to prevent the background-image fade effect in Chrome?

While transitioning the background-image, I noticed a difference between Chrome and Firefox. Firefox simply replaces the image instantly as expected, while Chrome adds a fade effect to the transition. Although this may be visually appealing, it introduces ...

What could be the reason for my code experiencing issues with fetching data from the database using a prepared statement

This is the PHP code I am using to retrieve data from a database using prepared statements. if ($conn) { //database connected successfully $view_sql = "SELECT * FROM certificate_verify"; $stmt_view = $conn->prepare($view_sql); $stmt_view->execute() ...

Concealing the pathway to a background image

Currently, I have a large grid made up of divs that display different sections of an image. By using background-image and background-position, I am able to showcase parts of the image. However, one issue is that users can easily view the complete image by ...