The text-overflow property with ellipsis functionality appears to be malfunctioning in Internet Explorer when applied to input elements, yet functions

Having an issue with the MS IE (version 11) when using the text-overflow: ellipsis; property for an input field. It appears that this specific property is not working properly in this browser.

If anyone has any suggestions or solutions, it would be greatly appreciated.

Check out the Fiddle here: https://jsfiddle.net/TjGyz/362/

input, div {
    width: 100px;
    border: 1px solid silver;
    padding: 5px;
    margin-bottom: 10px;
    outline: none;
    font: 20px sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
<input type="text" value="This element is an input" />

jqueryhtmlcss

Answer №1

<input type="text" value="This input field can be edited now" readonly/>

https://jsfiddle.net/kvuvkzeL/

Transform it into an editable field :

    $( '.EDITABLE_INPUT_CLASS' ).on( 'click', function() {
        $( this ).prop( 'readonly', '' );
        $( this ).focus();
    })

    $( '.EDITABLE_INPUT_CLASS' ).on( 'blur', function() {
        $( this ).prop( 'readonly', 'readonly' );
    })

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

Accessing a React component by ref before it has been rendered for the first time

In my component, I have a set of links with an animated line underneath the active link using position: absolute. Before I can position the underline correctly, I need to determine the offset().left value of the active link. The challenge is that before ...

jqueryreactjs

Conflict of JQuery ajax requests with the Play! framework

Whenever I trigger an action on my page, two ajax calls (A, B) are made to different methods on my server. Most of the time, each request receives its corresponding response. However, occasionally both requests receive the same response! (either A,A or B,B ...

ajaxjqueryplayframework

What is the best method for choosing HTML "ids" that are generated automatically by DevExpress controls using JavaScript DOM manipulation?

How can I create a pop-up that displays unique information for each of the hundreds of html divs with a common class but individual ids generated by DevExpress Controls? I have a large number of automatically generated html div "ids" and I'm looking ...

javascriptjqueryhtmldomdevexpress

Simple and quickest method for incorporating jQuery into Angular 2/4

Effective ways to combine jQuery and Angular? Simple steps for integrating jQuery in Angular2 TypeScript apps? Not sure if this approach is secure, but it can definitely be beneficial. Quite intriguing. ...

jqueryangulartypescript

Hide HTML div on click

Why does the button disappear when I click on it, but the status refreshes? Javascript $( ".refreshstatus" ).click(function(){ $( ".navplayers" ).load('stats.php'); }); CSS .refreshstatus{ font-family:'Noto Sans'; font-w ...

javascriptjqueryhtmlcss

Show the HTML content fetched from the database using PHP

After pulling html source code from a database and storing it in a PHP variable, I noticed that the content consists of table rows structured like this: <tr><td>10:00 AM</td><td class="success">Available</td></tr> < ...

phphtml

Update the URL and parse the data in a Backbone collection

For the purpose of development, I am looking to replace the collection with fake JSON results either from a JSON variable or a JSON file. However, I encountered an error when attempting to do so using url http://jsfiddle.net/qhoc/uZhM8/ GET http://fiddle ...

javascriptjqueryajaxmodel-view-controllerbackbone.js

Are you familiar with manipulating Arrays or Objects in jQuery?

In JavaScript, we can create objects with keys as strings for similar functionality to an associate array. Check out this example here. For example: ".home-title":[ ["font-size","12px"], ["line-height","16px"], ], However, if you need a ...

javascriptjqueryarraysjsonobject

Ways to align list items in the middle of a webpage with CSS

Currently, I am working on a website and looking to create a customized list where the pictures act as clickable links. You can check out the website here. My goal is to have the links adjust to align left based on the browser size, and also have the imag ...

htmlcsswordpressresponsive-designhtml-lists

Changing the z-index using createjs

Is there a way to ensure that the dragged item always stays on top when moved? How can I prevent it from getting dragged underneath another object? Can I specify which "sequenceNumbers" should be moved to the top of the sorting order? //++++++++ ...

javascripthtmldrag-and-dropz-indexcreatejs

Paused momentarily to allow user input

I am currently developing a new game where the player and enemies are stored inside objects with various properties. For example, each object includes: $player->health $player->attack (which represents attack power) Additionally, there is a PHP fun ...

phpjavascriptjqueryajax

To modify the text within the pagination select box in ANTD, follow these steps:

Is it possible to modify the text within the ant design pagination select component? I have not been able to find a solution in the documentation. I specifically want to replace the word "page" with another term: https://i.sstatic.net/w55hf.png ...

javascripthtmlcssreactjsantd

Creating personalized buttons for HTML dropdowns in PhoneGap

Is it possible to customize the buttons in an HTML select box (dropdown) with PhoneGap 3.5? I am looking to include a "Cancel" button along with the "Done" button. Are there any ways to modify or add select buttons through the PhoneGap API or plugins? ...

htmlselectcordova

Issues with the alignment of ion-grid in Ionic/Angular application

I am facing an issue in my ionic/angular project where I am attempting to create two columns within a row using ion-grid, ion-row, and ion-col. However, the content of the second column is unexpectedly appearing below the first column instead of beside it. ...

cssangularionic-framework

IE compatibility problem with the alignment of input group buttons and textboxes in Bootstrap v4

Encountering an issue with input group in IE while using bootstrap v4, working fine in Chrome. Specifically using IE 11 Here is my plunkr: input group bootstrap v4 Chrome display: https://i.sstatic.net/yXtEW.png IE display: https://i.sstatic.net/WiRz ...

csstwitter-bootstrapbootstrap-4

Utilizing PayPal as a payment method for an exclusive subscription-based online

Running a membership site involves users registering with their email and password, along with subscribing to a monthly plan. The frontend is built using jquery/ajax while the backend utilizes PHP/Slim. Currently, Stripe has been integrated as a payment me ...

phpjquerypaypal

Is there a way for me to determine if the HTML code is creating a new line?

Here is my code snippet: <div id="box"> <p> 123 </p> <p> abc </p> </div> <script> var html = document.getElementById("box").innerHTML; for (var i = 0, len = html.length; i & ...

javascripthtmlxml

Selecting a filter for an array of objects

I'm struggling to implement a search feature in my mat-select DropDown. The existing options I've found online aren't quite working for me due to the object array I am passing to the Dropdown. Any assistance or guidance on this matter would ...

htmlangulartypescript

Creating a dynamic feature in React where multiple icons change color individually when hovered over, all implemented

I'm looking to customize the icons in my footer by changing their colors when users hover over them. I have already created a CSS class with the necessary hover effects, but now I want to pass a parameter in my JSX file that specifies which color shou ...

htmlcssreactjshoverfont-awesome

Unexpected failure of Ajax response following a successful upload

I am currently using jQuery to upload files or images to a CodeIgniter controller. Despite facing some challenges, I have successfully managed to upload the image. However, I am encountering some strange behavior from the AJAX function. Issue: The AJAX ca ...

jqueryajaxcodeigniter