Tips for aligning text to the left instead of the right when it exceeds container width in IE 11

Within the div, there is text with a 5px margin on the right. When the container div narrows, the text overflows from the container and loses the right margin. Is it feasible to maintain this margin on the right side while allowing the text to overflow from the left side of the container instead of the right? The addition of "display: flex; justify-content: flex-end;" to the box element resolves the issue in Chrome but not in IE 11.

Below is a demonstration:

.box {
  margin-bottom: 15px;
  margin-left: 30px;
  background-color: red;
  width: 170px;
  white-space: nowrap;
  text-align: right;
}

.text {
  margin-right: 5px;
}

.box2 {
  width: 50px;
}
<div class="box box1">
  <div class="text">Sample text</div>
</div>
<div class="box box2">
  <div class="text">Sample text2</div>
</div>
htmlcss

Answer №1

Unfortunately, IE 11 does not offer support for flexbox, which is why it may not be working as expected in your case. One workaround could be to float the .text element inside your .box and add a clearfix to the box.

Overall, IE has poor support and is no longer being maintained. It may not be necessary to prioritize supporting it unless absolutely required for your project.

Here is an example:

.box {
  margin-bottom: 15px;
  margin-left: 30px;
  background-color: red;
  width: 170px;
  white-space: nowrap;
  text-align: right;
}

/* clearfix */
.box::after {
  content: "";
  clear: both;
  display: table;
}

.text {
  margin-right: 5px;
  float: right;
}

.box2 {
  width: 50px;
}
<div class="box box1">
  <div class="text">Sample text</div>
</div>
<div class="box box2">
  <div class="text">Sample text2</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

CSS for the root folder of an ASP.NET website

After deciding to venture into ASP.NET, I quickly encountered my first obstacle. The folder structure is as follows: \ ->Admin -->Admin.Aspx ->CSS -->Style.css ->Images -->bg.gif Default.aspx Default.master Both admin.aspx and ...

asp.nethtmlcss

Steps on displaying a fresh div containing an identical input box within the original parent div

I am looking to create a search feature with a text box and popup aligned at the top left corner of the window. The navbar already contains a search input box, but when clicked, I want to display another div that mirrors the width and content of the origin ...

htmlcssbootstrap-4

Experience the advanced NgPrime p-dropdown template with templating, filtering, and a clear icon that collapses when wrapped within a form element

Check out this link for a demo Whenever I enclose the code below in a </form> element, the drop-down menu collapses. <h5>Advanced with Templating, Filtering and Clear Icon</h5> <p-dropdown [options]="countries" [(ngModel)]=& ...

javascripthtmlangularprimeng-dropdowns

Retrieving HTML array values using jQuery

Presented below is an array of input boxes. <form> 9 <input type="checkbox" name="date[]" value="9"> 10 <input type="checkbox" name="date[]" value="10"> 11 <input type="checkbox" name="date[]" value="11"> </form> The o ...

jqueryarraysajaxhtml

Unable to align span vertically using font-style "Luckiest Guy" in CSS

I have encountered an issue with vertically centering a span using the font-style "Luckiest Guy". https://i.sstatic.net/Lz8o3.png I attempted to use display: flex;align-items: center; on the span, but it did not work. App.vue <template> <div ...

javascripthtmlcssvue.jsflexbox

Numerous Selection Boxes

I came across this code snippet on the web. How can I insert the output into an email? Usually, I follow this format: $name = $_POST['name']; $email_body = "$name"; I want to incorporate the output of this code into my $email_body variable. Is ...

phphtmlformsemailcheckbox

Incorporating a closing screen into a game built with Canvas and jQuery

After following a tutorial on creating a snake game, I decided to work on enhancing it as a side project. Currently, the game has a start screen where players can begin the game by pressing "start." My goal is to implement an end screen that displays the ...

javascriptjqueryhtmlcanvas

Deliver the event target within the data-bind click HTML

I am having trouble sending the event target when passing parameters in data-bind. <button class="tablinks" data-bind="click:$root.notify.bind(this, 1, 'foo');" id="defaultOpen">PRINCIPAL</button> self.notify = function (str, id, e) ...

javascriptjqueryhtmlknockout.js

Is there a way to prevent an external script from making changes to an inline style?

There is a mysterious script running on a page that seems to be controlling the height of an inline style. The source of this script modifying the height property is unknown. <div class="vgca-iframe-wrapper wpfa-initialized" style="heigh ...

javascripthtmlcss

The Flask server push appears to be functioning correctly, yet the EventSource.onmessage event is not triggering as expected

My implementation includes a route /stream that is designed to push the string 'test' every second. Upon accessing this URL (localhost:12346/stream) on Chrome, I observed that it opens a blank page and adds "test" to the page every second. This ...

javascripthtmlflaskserver-sent-eventseventsource

Activate a button on-the-fly

When the page loads, I have an empty array. Since there are no values stored in this array, I disabled the button using ng-disabled="array1.length==0". Now, on the page that opens up, there are four drop downs present. My goal is to enable the button once ...

javascripthtmlangularjsbuttoncontroller

Execute JavaScript function after the reset button has been clicked

Is there a way to execute a function right after the form elements are reset by the <input type="reset"/> button? ...

javascripthtmlonclickreset

Filtering options in a dropdown box with jQuery

I have implemented a feature where the content of one select box is filtered based on the option selected in another select box. Below is the code snippet that achieves this functionality: // Filter content based on the selected option in a region select ...

javascriptjqueryhtml

Is it possible to sanitize user input without relying on !important?

Utilizing wp_editor, I have implemented a front-end form on my WordPress website for users to post without accessing the admin section. Although it is functional, there is a concern that users may copy and paste content with inline styles that could disrup ...

csswordpresssass

Developing an identical design and layout but utilizing a distinct domain name for the company

After being given the task of creating a website identical to an existing one with a different domain name on WordPress, I proposed using the parent HTML source code or cloning it to speed up the project. The client agreed, explaining that starting from sc ...

javascripthtmlwordpressalter

What causes background-color to create gaps of white space?

How can I remove the white spaces on the right and left side of a section when applying a background-color? I want the background-color to fill out the entire width of the section. Should I use extra padding to solve this issue? I have checked the CSS fo ...

htmlcss

Issues with Bootstrap Carousel Slide Show functionality in FireFox

I have implemented a Bootstrap-5 Carousel Slide Show for the website banner. It is functioning correctly in Google Chrome, but there seems to be an issue when viewed in Firefox. The Firefox browser version I am using is 90.0.2 (64-bit). Upon inspecting the ...

htmlcssbootstrap-5

Uploading an image using ajax with multer

When using Multer to upload an image file to my Node server, I keep getting 'undefined' when trying to use ajax to send the image. Ajax : image = $("#input-file-img").val() const data = new FormData(); data.appe ...

javascripthtmlnode.jsajaxmulter

Permit the use of HTML tags within a CSS-only tooltip

I have created a unique CSS tooltip. <span data-tooltip="The security code is a 3-digit number<br />on the back of your Visa or Mastercard debit or credit card, or a 4-digit number on the front of your American Express card.">Help</span> ...

htmlcss

Certain rows in the table should maintain a consistent width, while others are allowed to vary

I am dealing with a table containing certain rows Some of these rows are visible, while others are hidden. The visible rows at the start are referred to as: mainTrs. Clicking on a visible row will make all rows with a class matching its id visible. Cli ...

javascriptjquerycsshtml-table