Can anyone help me figure out how to display a single line of text with three dots (...) if it exceeds the width of the container?
I've tried using the CSS code below, which works on Mozilla and Chrome, but for some reason, it's not working on IE 11.
display: block;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 20px;
If anyone knows whether this issue is related to the IE 11 version or if there's a solution to make it work, please let me know.
Internet Explorer 11 can support the following CSS properties: white-space:nowrap; and text-overflow:ellipsis;
Here is an example:
h2 {
display: block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
padding-right: 20px;
}
When it comes to Internet Explorer, the ellipsis effect will only function on input fields if the readonly attribute is set to readonly or true.
$('.all-javascript input').on('focusout',
function() {
$(this).prop('readonly', 'readonly')
})
$('.all-javascript input').on('focusin',
function() {
$(this).prop('readonly', false)
})div {
margin: 40px 20px;
}
input {
width: 300px;
display: inline-block;
white-space: nowrap
overflow:hidden;
text-overflow:ellipsis;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="chrome">
<input type="text" value="Lorem ipsum dolor sit amet, liberavisse signiferumque ex pri, diam brute epicurei cum ad. Ne mutat nostrud erroribus eam. At vis ignota appareat, vis tollit dicant cu. Est ceteros consequuntur an, an diceret iracundia maiestatis sea, an modo perfecto ocurreret mea. An mel quot philosophia. Elit dicant expetenda qui te.">
</div>
<div class="ie-11">
<input type="text" value="Lorem ipsum dolor sit amet, liberavisse signiferumque ex pri, diam brute epicurei cum ad. Ne mutat nostrud erroribus eam. At vis ignota appareat, vis tollit dicant cu. Est ceteros consequuntur an, an diceret iracundia maiestatis sea, an modo perfecto ocurreret mea. An mel quot philosophia. Elit dicant expetenda qui te." readonly='readonly'>
</div>
<div class="all-javascript">
<input type="text" value="Lorem ipsum dolor sit amet, liberavisse signiferumque ex pri, diam brute epicurei cum ad. Ne mutat nostrud erroribus eam. At vis ignota appareat, vis tollit dicant cu. Est ceteros consequuntur an, an diceret iracundia maiestatis sea, an modo perfecto ocurreret mea. An mel quot philosophia. Elit dicant expetenda qui te.">
</div>Give this code a shot, it's optimized for Internet Explorer 11
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
One crucial point to note about IE and overflow:ellipsis is that if your text contains line breaks, it will only apply to the first line. To illustrate this, take a look at the code snippet below:
<style>
div {
width:100px;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
padding-bottom:10px;
}
</style>
<div style="color:green">
Something longer than a line
</div>
<div style="color:red">
Something longer than a line<br>
And here's another, just<br>
to showcase this odd behavior
</div>
Compare the output in IE11 on the left side with other well-known browsers on the right side:
https://i.sstatic.net/mGmRByDs.png – vs – https://i.sstatic.net/kEtUrw6b.png
Is there a way to maintain the colors while printing my HTML page to PDF? <table class="table table-responsive table-striped"> <thead> <tr> <th>Elev</th> <th>Session n ...
Hey there, I'm currently facing an issue with applying a box shadow to one of the buttons in my React Native application. Unfortunately, the box shadow property is not supported in Android. To work around this limitation, I am experimenting with creat ...
My menu features CSS3 effects on hover and active states, giving it a unique appearance. Below is the CSS3 styling I have implemented: #Menu a:active, #Menu a.active:before,#Menu a:hover:before { Content: ' '; position:absolute; z-i ...
I'm facing challenges setting up my Wordpress theme to be compatible with early versions of Internet Explorer. Most online tutorials have advised me to enqueue specific I.E stylesheets in the header, but this method has not been successful for me. Add ...
I am utilizing an HTML, CSS, and JS template to design the interface for my Rails application. Within this template, there are several plug-ins that are required in both CSS and JS formats. I have stored these plug-ins within the "/assets/plugins/" directo ...
Is there a way to alter styles of a sibling element on hover using only CSS? I attempted something similar but was unsuccessful. HTML: <ul> <li class="item active">name1</li> <li class="item">name2</li> <li clas ...
Hi there! I'm new to jquery and trying to enhance the functionality of my application which has multiple HTML tables in JSP's. My goal is to use jQuery to dynamically apply a CSS style class when hovering over a row. Currently, I have the followi ...
I'm looking to create a header with a background image that appears twice, like this: To achieve the effect, I added opacity of 0.5 to one of the images, but it is affecting everything in my header including text and logo. Is there a way to prevent t ...
Within the project, I am utilizing this theme: export const theme = createMuiTheme({ ...defaultThemeConfig, overrides: { ...defaultThemeConfig.overrides, MuiListItem: { root: { '&:nth-child(odd)': { backgro ...
Seeking assistance on centering the hamburger icon on my sidebar. Currently, when I adjust the width of the sidebar, the icon is not centered at all. Does anyone have a solution for achieving this? I attempted using justify-content: center in the main clas ...
After coming across a similar inquiry on Stack Overflow (), I decided to create my own solution since the original answer lacked code details. The task at hand is to embed an HTML5 video within an iPhone image frame, like so: The image dimensions are 300 ...
Currently, I am attempting to customize the appearance of the KeyboardDatePicker component including board color, size, font, and padding. However, none of the methods I have tried seem to be effective. Here is what I have attempted so far: 1 . Utilizing ...
I have a question about creating multiple <section> elements on a page. I am looking to build an HTML document with several <section> tags, as outlined below. <html> <head> </head> <body> <sectio ...
Is there a way to deactivate Bootstrap within a specific section? I want the styles from Bootstrap's CSS file to be overridden inside this div. ...
UPDATE: I recently included a placeholder item in my carousel because the local database feed was not working, and now the theme is malfunctioning locally as well. Something seems off with the carousel items causing issues. END OF UPDATE I successfully ...
Looking for assistance in creating a dynamic menu with sub-menus that can expand upon clicking. The goal is to have an expandable menu structure where the user can click to expand or collapse certain sections. However, my current code is not functioning co ...
I have a styled table where rows change background colors based on odd and even indexes, with a hover effect included. However, I want to disable the hover effect when a row is selected. Here's the current code snippet: .odd{ background: #f7f7f7 ...
My picture is positioned in a grid column. When utilizing Bootstrap 4, the .title-image { width: 60%;} style works as intended. However, upon transitioning to BS 5, the image suddenly expands and protrudes. It appears that the width attribute is now align ...
I am in the process of creating a Vue application to generate my CV in PDF format. I have incorporated the Google font Montserrat into the project, but when I attempt to print the page to file (CTRL + P in Firefox), the text appears as if it were an image ...
Currently working on customizing the navbar using Bootstrap. I've been able to style it perfectly for both desktop and mobile devices in its initial state. The issue arises when attempting to style the navbar in its expanded and collapsed states on m ...