"Utilizing the flex box feature in IE 10 for efficient text trunc

.container {
  background: tomato;
  width: 100px;
  display: flex;
}

.text-left {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-right {

}
<div class=container>
  <div class="text-left">
    title title title title
  </div>
  <div class="text-right">
    123
  </div>
</div>

In this scenario, I have a container (container) with two nested divs: text-left and text-right.

The width of the container is already specified. The objective is to truncate the text in the text-left div if it exceeds the available space, while the content in the text-right div should always be visible. Various methods were tested here, but only the one utilizing flexbox proved effective. Regrettably, this solution doesn't function as expected in Internet Explorer 10 despite attempts with -ms- prefixes.

Are there any alternative approaches or tweaks that can ensure compatibility with IE10?

htmlcssflexboxinternet-explorer-10

Answer №1

If you are unable to test this on IE10 yourself, keep in mind that the -ms-flex property defaults to 0 0 auto. To allow for shrinking, you will need to add -ms-flex: 0 1 auto specifically to the left.

For IE11 and other browsers where the default is 0 1 auto, it should work as is without any additional adjustments.

Check out the Fiddle demo here

Stack snippet:

.wrapper {
  background: tomato;
  width: 100px;
  display: -ms-flexbox;                     /*  IE10  */
  display: flex;
}

.left {
  -ms-flex: 0 1 auto;                       /*  IE10  */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.right {

}
<div class=wrapper>
  <div class="left">
    title title title title
  </div>
  <div class="right">
    123
  </div>
</div>

Answer №2

Consider this approach that does not rely on flexbox but instead uses display:table:

.container {
  background: tomato;
  width: 100px;
  display: table;
}

.left-column {
  display: table-cell;
  position: relative;
  width: 100%;
}

.left-column span {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.right-column {
  display: table-cell;
}
<div class=container>
  <div class="left-column">
    <span>
    title title title title title title
   </span>
  </div>
  <div class="right-column">
    123
  </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

What is the best way to title an uploaded chunk with HTML5?

Here is the script I am working with: function upload_by_chunks() { var chunk_size = 1048576; // 1MB function slice(start, end) { if (file.slice) { return file.slice(start, end); } else if (file.webkitSlice) { ...

javascriptphpjqueryajaxhtml

Conflicting behavior between jQuery focus and blur functions and retrieving the 'variable' parameter via the $_GET method

There is a simple focus/blur functionality here. The default value shown in the 'Name of Venue' input field changes when the user clicks on it (focus) and then clicks away(blur). If there is no text entered, the default value reappears. Input fi ...

phpjavascriptjqueryhtml

Storing ng-change event for a checkbox in AngularJS in a valid manner

I have a requirement where I need to handle multiple input checkboxes. The goal is to store the changed checkbox events in an array and then save them when the user submits the changes. <td><input type="checkbox" class="switch" ng-model="each_val ...

javascriptjqueryhtmlangularjscheckbox

The media query for mobile is not functioning properly

Hello, I have a page with MVC that includes CSS for iPad and mobile devices. The media query for iPad (@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)) works perfectly, but I am struggling to get the media query for mobile ...

cssmobilemedia-queries

Utilizing JQuery to extract the image title and render it as HTML code

I am currently facing an issue with displaying an image in my project. I want to hide the image using CSS (display: none) and instead, retrieve the value of its title attribute and display it within the parent div by utilizing JQuery. Despite knowing tha ...

javascriptjqueryhtml

Looking to reposition the control buttons above the slider in easySlider 1.7?

I am thoroughly enjoying the easySlider 1.7 and found it incredibly simple to implement. The only modification I wish to make is to relocate the next and previous buttons above the slider instead of below it. Does anyone have any suggestions on how to achi ...

jqueryhtmlcss

Utilizing AngularJS, implement ng-form and ng-repeat to seamlessly handle input validation and submission actions

Angular 1.6.2 I am experimenting with iterating over elements of a collection inputted by the user, checking their validity, and enabling the submit action if validation passes. I have tried using ng-form for this purpose and have come up with two differ ...

javascripthtmlangularjsformsangularjs-ng-form

The image fails to display correctly

As I work on creating a basic webpage in HTML and JavaScript, my goal is to validate certain parameters (such as width, height) of an image that users upload via a form. In JavaScript, I extract the file from the form and attempt to display it as an image ...

javascripthtml

What is the best approach to retrieve a JSON object from a form exception that has a specific name?

I have a certain form with input fields. My goal is to generate a JSON object from the form, excluding any input whose name is "point". However, my code doesn't seem to be working properly when I use the "not()" function. What am I doing wrong and how ...

javascriptjqueryhtml

Incorporate a background image with the JavaScript CSS property

I'm having trouble adding a background image using the Javascript CSS property in my code. When I directly add the 'url', it works fine. Could the issue be with the 'weatherImage' variable? Javascript var OpenWeatherKey = ' ...

javascriptjqueryhtmlcssbackground-image

Validation of user input using jQuery

Trying to ensure that the form inputs are not empty has been a challenge. Despite using jQuery for input validation, it seems that the inputs are not being properly checked. Strangely, the submit button still allows the form to be submitted: <form id=" ...

javascripthtmlformsinput

Selenium - pausing for scroll completion

I am currently working on automating downloads from a webpage using the selenium tool. My approach involves creating a firefox driver that opens the page and clicks the download button. However, I have encountered an issue where the button needs to be vis ...

pythonhtmlseleniumselenium-webdriverweb-scraping

Preventing Users from Accessing a PHP Page: Best Practices

I'm currently focusing on a problem that involves restricting a user from opening a PHP page. The following is my JavaScript code: <script> $('input[id=f1email1]').on('blur', function(){ var k = $('inp ...

phpjavascriptjqueryhtmlsecurity

Border provides spacing within a div using the box-sizing property set to border-box

I am facing an issue where I have a div with the class "outer" containing another div with the class "inner". Upon adding a 2px border to the "outer" div, padding is automatically applied in a way that appears as 1px padding on the top, left, and right sid ...

htmlcsscss-position

Having issues with the CSS dropdown menu not activating when hovering

I am facing an issue with a simple menu that includes a dropdown feature upon hovering. The code works perfectly fine in Fiddle, however, it fails to work when running the entire page locally on IE. Can someone please assist me? (here's my code at fi ...

cssdrop-down-menumenu

Overriding Styles Set by an External CSS file

Let's assume that I have two different style sheets set up on my webpage: site.css: .modal { position: absolute; width: 200px; ... } ... reset.css: .reset * { position: static; width: auto; ... } Unfortunately, I don ...

javascriptjquerycss

Deleting a property once the page has finished loading

My issue is a bit tricky to describe, but essentially I have noticed a CSS attribute being added to my div tag that seems to come from a node module. The problem is, I can't seem to find where this attribute is coming from in my files. This attribute ...

htmlcssangularjstypescriptvideo.js

Discover the method for inserting a title attribute value into a span element

Utilizing AngularJS to retrieve and display data within a span element. I am now aiming to utilize this value as the title for another span element. The current code being used is shown below: <span style="display: inline-block; width: 160px">{{acti ...

javascriptjqueryhtmlasp.netangularjs

The DIV refuses to center-align

I am struggling to center a div element. I have tried using margins (margin: 0 auto) and left/right CSS attributes (left: 50%, right: 50%), but the result is not as expected. Can anyone point out where the problem might be? EDIT: The issue I'm facin ...

htmlcssalignment

The MuiPrivateTabScrollButton alters the dimensions and flexibility properties using CSS

I have been facing a challenge with overwriting the css of MuiPrivateTabScrollButton. Since this class is generated from material ui, I am unable to successfully overwrite it. Despite debugging and trying various fixes such as adding border colors, I still ...

htmlcssreactjsmaterial-ui