"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

Don't display div if database has certain value - Angular

Is there a way to determine if a specific value exists in a PostgreSQL database? If so, can I then hide an HTML element based on this information? Can CSS and JavaScript be used to hide elements, or is there another method that should be utilized for hidi ...

javascriptcssnode.jsangularpostgresql

Does "br" not play well with flexbox?

After creating a table using flexbox, I made an interesting observation: the br element seems to have no effect within the flexbox. For example: .flexbox { display: flex; flex-wrap: wrap; border: 2px solid red; padding: 2px; } .item { width: ...

htmlcssflexbox

interactive navigation menu with countdown feature

Looking to create an HTML/jQuery dropdown menu, but encountering a problem. The goal is for the div to slide down when the mouse hovers over the "games" navigation button and only disappear after 5 seconds of the mouse being out, not instantly. Here's ...

javascriptjqueryhtmlmenunavigation

What is the best way to have a sound play when the page is loaded?

Is there a way to automatically play a sound when the page loads? <audio src="song.mp3"> Your browser does not support the audio element. </audio> I've attempted it with the following method: <script type="text/javasc ...

javascripthtml

Is there a way to determine the dimensions of a pdf file using javascript and capture a snapshot of it for showcasing on a website?

I'm fairly new to HTML/CSS and haven't delved into javascript yet, but I have a good understanding of reading other people's code. Currently, I'm putting together my portfolio website and would like to include my resume on the page in a ...

javascripthtmlcsspdf

Code containing insertAdjacentHTML() does not run as expected due to injection of script

I have a scenario in my application where I am sending a request from the client to a node.js server. The server responds with an HTML containing a script: app.post('/verify', cors(issue2options), async (req, res) => { let auth = await mon ...

javascripthtmlnode.js

"Utilizing Bootstrap to ensure content is aligned perfectly to the baseline

I've been struggling to align my contents to the baseline while working with the bootstrap framework. I tried following the instructions in the documentation, but it didn't work out as expected. <div class="row"> <div class="col-12 ...

htmlcsstwitter-bootstrap

Arrange a pair of div containers side by side on the webpage without the need to alter the existing

Is there a way to align these two div side by side? <div class="main_one"> <div class="number_one">Title A</div> </div> <div class="main_two"> <div class="number_two">Title B</div> </div> <div class=" ...

cssangularjsreactjstwitter-bootstrapsass

Steps for triggering a click event on a div with a button role within a class containing multiple elements

Can anyone help me figure out how to auto-click every button in Instagram's "hide story from" settings using console? I tried the following code: for (let i = 0; i < 300; i++) { document.getElementsByClassName('wbloks_1')[i] ...

javascripthtmljquerycss

Navigating the Foundation Topbar - Should I Toggle?

Is there a simpler way to achieve the navigation I desire, similar to the switcher for uikit? Instead of using data-toggler on each tag in my top bar, is there an easier method where I can click links in my top bar to display different content without go ...

javascripthtmlcsszurb-foundation

Designing a unique CSS border for custom list item bullets

I'm currently exploring the possibility of implementing a CSS border around an image that I have imported as a custom bullet for my list items: ul { list-style: none; margin-right: 0; padding-left: 0; list-style-position: inside; } ul > ...

htmlcsshtml-listsborder

Learn how to dynamically disable or hide the "Today" button in an angular-ui datepicker based on whether it is the weekend

What is the process to hide or disable the "Today" button based on a condition, for example, if today is a weekend? The goal is to conceal the "Today" button in such scenarios. <div class="form-group"> <div class="input-group datePicker"> ...

htmlangularjsangular-ui-bootstrap

The CSS styles are not recognized by the Windows 2003 server

After deploying my webapp, which was created using asp.net, to a testing server (Windows 2003 SP2, IIS6), I encountered an issue. When I accessed the default page, none of the CSS styles were applied. Only plain text or formatting from the .aspx file was v ...

c#asp.netcss

The sequence of divs in a language that reads from right to left

Is there a way in HTML to designate a set of divs so that they automatically align from left to right for languages that read left to right, and alternatively, flow from right to left for languages that read right to left? This means that the direction of ...

javascripthtmlcssinternationalizationright-to-left

I do not prefer output as my optimal choice

My preference is to create drill down buttons rather than focusing on output. Currently, the output appears as: The content of index.html is as follows: <html>　 <head> <script type="text/javascript" src="http://ajax.googleapis.com/ ...

javascriptjqueryhtml

Exploring the CSS scale transformation alongside the Javascript offsetHeight attribute

After combining offsetHeight with scale transformation, I experienced a strange result. Below is my simple HTML code: <body> <div id="id01"> Some Text </div> <div id="id02" style="transform-origin: left top; transf ...

javascriptcsscss-transforms

Enhancing Bootstrap with VueJS for better component ordering

I've been struggling with Vue components in Bootstrap lately. I am attempting to create collapsible Bootstrap content in Vue, and here is the current code: HTML <div class="col-sm main-content" id="main-content"> <p&g ...

javascripthtmlvue.jsbootstrap-4

Transfer the information from dropped files in a div to a separate page

document.getElementById('drag_drop').ondrop = function(event) { event.preventDefault(); var form_data = new FormData(); var drop_files = event.dataTransfer.files; for(var count = 0; count < drop_files.length; count++) ...

javascriptphphtml

extracting information with beautifulsoup

Currently, I am diving into BS4 to enhance my skills and expertise. My goal is to scrape various tables, lists, and other elements from well-known websites in order to grasp the syntax. However, I am encountering difficulties when it comes to formatting a ...

pythonhtmlhtml-parsingbeautifulsoup

Choose a class and all its offspring as a selector

I possess the subsequent <label class="noblock"> <input> ... ... </label> Is there a method to indicate the CSS property display: inline for both the class noblock and its offspring (all elements within it)? ...

htmlcss