The ellipsis text-overflow feature occasionally malfunctions during a single session when using IE 11

.show-ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
<div class="container">
  <div class="row show-ellipsis">
    {{record.bodyName}}
  </div>
</div>

My web application supports versions of Internet Explorer from 9 to 11. The CSS style I have implemented for displaying ellipsis at the element level can be found in the code snippet above. This code is used within an ng-repeat loop. Interestingly, while the ellipsis shows up for some rows, it does not appear for others. I have verified that there are no HTML tags like
present in the text retrieved from the database. To provide more context, I have included a screenshot for reference. Your assistance in resolving this issue would be greatly appreciated. Please check out the screenshot by clicking on this link: please click to see screenshot

htmlcss

Answer №1

Navigating through uncertain territory, you find yourself in a bit of a quandary. Upon consulting the website Caniuse.com for text-overflow, it becomes apparent that text-overflow lacks full support in Internet Explorer versions prior to 11.

Furthermore, the "known issues" section on Caniuse may shed some light on your situation:

  • In IE8 and IE9, text-overflow does not function properly within <input type="text">
  • Some browsers based on Samsung's technology have trouble with overflowing text when using ellipsis along with text-rendering set to anything other than auto.
  • The use of text-overflow on select elements is limited to Chrome and IE, excluding Firefox.

Answer №2

Having trouble with text-overflow:ellipsis not functioning in IE11 for certain text segments. I have resolved this issue by implementing ng-class to apply the same style, which now works perfectly. Here is the updated HTML structure:

record.showEllipsis = 'show-ellipsis';
<div class="container">
        <div ng-class="record.showEllipsis">
          {{record.bodyName}}
        </div>
      </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

Efficient Ways to Utilize Global CSS in an Angular Project Without CLI

I am utilizing ASP.NET MVC as the server and Angular as the client application. Instead of a static index.html file, I have index.cshtml. The styles I am using are global styles rather than component-scoped. My query revolves around working with a bunch ...

cssangulartypescriptwebpackecmascript-6

Easily move elements using a jQuery click animation

Having trouble animating a div's top position by -130px to move it off screen? Can't figure out why it's not working? I'm fairly new to jQuery/Javascript. I have a button/hyperlink with the ID #NavShrink. When clicked, I want the div # ...

javascriptjqueryhtmlcssjquery-animate

Conceal picture when clicked

My goal is to hide an image upon clicking and then show it again by clicking a specific tag. I've attempted various codes, but none have been successful. Every time I click, the image continues to add to the page. <body> <a href="#" class= ...

jqueryhtml

Implement the Bootstrap datetimepicker functionality for the specified div element

The date picker successfully functions when I assign the id to the input tag as shown below: <div class="col-sm-4" id="datepicker"> <input type="text" class="form-control" id="inputDate" placeholder="Date"> <span class="glyphicon gl ...

javascriptjqueryhtmlcsstwitter-bootstrap

Issue: The system does not recognize 'cleancss' as an internal or external command

After successfully installing clean-css via npm command line, I was eager to start using it to concatenate and minify some css files. However, my excitement quickly turned to frustration when I encountered this error: 'cleancss' is not recognize ...

cssnode.jscommand-linenpm

I'm having trouble getting my button to float correctly on the right side

Here I am facing a unique situation where I am attempting to align my button input[type="submit"] to the right side. I have allocated space for it and therefore trying to float the button to the right so that it can be positioned next to my input text. U ...

htmlcss

Having trouble updating attribute through ajax requests

How can I set attribute values using ajax-jquery? Here are some snippets of code: HTML_CODE ========================================================================== <div class="col"> <ul class="nav nav-pills justify-content-end& ...

javascripthtmljqueryajax

How can I prevent users from clicking the same link multiple times in HTML?

Is it possible to disable the href after one click using javascript or jquery? I need some assistance with this. Please help. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml ...

javascriptjqueryhtml

Showing data from the POST request in a dialog box

Greetings to all! I am in the process of building a webpage to test my API. The goal is to send a form to my nodejs backend and receive a JSON response back. So far, sending the request is functioning properly and I can track its progress on my VPS conso ...

jqueryhtmljsonajaxpost

Determine if the given text matches the name of the individual associated with a specific identification number

Struggling to create a validation system for two sets of fields. There are 6 inputs in total, with 3 designated for entering a name and the other 3 for an ID number. The validation rule is that if an input with name="RE_SignedByID" contains a value, then c ...

javascriptjqueryhtml

Tips for rotating a canvas object without changing its position

I am currently in the process of developing a JavaScript game centered around a character positioned on top of the world. Although the earth element is already part of the game, I am encountering an issue with its rotation causing it to shift position as w ...

javascripthtmlcanvasrotation

Personalized parallax design

I am in the process of developing my own custom parallax plugin to allow me to control the direction in which items transition off the screen. However, I am currently facing a challenge in ensuring that regardless of how a user scrolls or the size of the w ...

javascriptjqueryhtmljquery-effectsparallax

Which characters are permissible for the id attribute to prevent the jQuery selector from throwing an exception?

I am facing a situation where the id attribute is inputted by an end user. For instance, if the id for a textbox is "11_=11" as entered by the user, then the HTML code will appear like this: <input type="text" id="11_=11"> The corresponding jQuery ...

javascriptjquerycsshtml

Adding to a webpage's URL with PHP prior to rendering the content

Currently, I am investigating how to add a random query string at the end of a URL when someone visits my page for the first time. Let's say an individual goes to my website at www.example.com. If everything proceeds as planned, they will land on my i ...

phphtmlurl

Mobile values in tailwindcss take precedence over breakpoints values, overriding them

I have encountered a puzzling issue that seems to have no answers thus far. Whenever I set paddings or margins for mobile devices and attempt to adjust these values for larger screens, the original mobile base value stubbornly persists and overrides my sp ...

cssnext.jstailwind-css

The issue with implementing simple getElementsByClassName JavaScript in the footer of a WordPress site persists

I am facing an issue with a 1-liner JavaScript code in the footer where getElementsByClassName function doesn't seem to work for tweaking style attributes. The text "Hello World" is displaying fine, so I suspect it might be a syntax error? Here' ...

javascripthtmlwordpress

Can we find a method to incorporate multicolored borders?

I currently have a td element with the following CSS styling: td { border-bottom: 3px solid aqua; } I want to be able to click on these cells and change their color, similar to the images linked below: https://i.sstatic.net/5DscU.png Is there a way ...

javascripthtmlcsshtml-table

Access a designated tab using cbpFWTabs

I am currently using the cbpFWTabs plugin from Tympanus for my tabs (http://tympanus.net/Development/TabStylesInspiration/). However, I am struggling to open a specific tab upon page load. I have attempted to create a show method within the page script, bu ...

javascriptjqueryhtmltabs

Stop text from overflowing when it reaches the maximum width in flexbox

A basic flexbox layout is displayed with an image next to text, aiming for this layout: #container { align-items: center; background: black; display: flex; justify-content: center; padding: 10px; width: 500px; /* Dynamic */ } #image { bac ...

htmlcssflexbox

Unsupported MIME format

I'm encountering an issue where my stylesheet is not applying to my handlebars. It was working fine yesterday, but today I'm seeing a MIME error and I'm unsure of the reason behind it. Any assistance would be greatly appreciated. Server Cod ...

cssnode.jsexpress