Overlapping text display in IE8 and Firefox

I am facing an issue with setting text-overflow to :text-overflow:ellipsis. The problem arises when the input text exceeds the length that I have specified, it does not show in ellipsis. Below is a snippet of the code:

<td align="left" width="220px">
    <h:inputText id="id_NETypeInput" value="" style="width:200px;font-size:12px;align:left;text-shadow: 1px 2px 3px rgba(0,0,0,0.5);text-overflow:ellipsis;"
        styleClass="otEditField"
        onclick="#{rich:component('ruleTypeSelectPanel')}.show()" />
</td>

Would appreciate any feedback on this issue. Thank you.

css

Answer №1

To display an ellipsis, ensure to include overflow: hidden;, set maximum height and width on the element, and use text-overflow: ellipsis.

Answer №2

Here's a CSS trick to ellipsis text, but keep in mind that it may not work on all browsers:

/* Add this to your CSS */
{
  white-space: nowrap;
  width: 100%;                   
  overflow: hidden; /* "overflow" value must be different from "visible" */
  text-overflow:    ellipsis;
}

If you want to learn more about this technique, check out this link here. For browser compatibility, you can also refer to this link here.

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

The alignment of the label button within the form-group is being set to the top

While using Bootstrap 4, I encountered an issue with aligning the save button in a form group because there was no label at the same level. Despite trying to follow an example from here, I still had to hard code margin-top to prevent the button from bein ...

htmlcssbootstrap-4

How can I shift the top line to the bottom of the text using CSS?

I am facing an issue with CSS or HTML where I need to move a line from the first circle to the second one, as shown in the image below. Here is the link to my JSfiddle version: https://i.sstatic.net/Pn6rF.jpg JSFiddle code: https://jsfiddle.net/odzuwsdt ...

htmlcss

Ways to display JSX with formatted new lines and spaces in React.js?

Here is an image displaying a comparison between my console log and React website in Google Chrome. Check out the Console log and Chrome website Notice how the console output is neatly formatted with new lines and indents, while the text below "Generated ...

javascripthtmlcssreactjsconsole.log

Basic website layout

As someone who is new to web programming, I kindly ask for your patience :) I have a goal to design a page similar to the one linked below https://i.sstatic.net/HbJF3.png There are two key functionalities I am aiming for: 1) Clicking the button on the r ...

javascripthtmlcssexcel

Can you explain the significance of the final digit in the CSS class "col-md-x"? I am referring to instances where

For instance, the classes col-md-4 and col-md-1 can be used, with options available all the way from 1 to 12. But what does each number signify? ...

cssbootstrap-4

Tips for Utilizing Border-Radius in Safari

What is the best way to hide a child element's corners within its parent (#div1) Ensuring that the child does not overflow its parent container? ...

csssafari

Bootstrap grid with Flexbox to create a visually appealing layout with images of varying sizes

I am facing a challenge with images of different dimensions that I need to display at the same height within a Bootstrap grid. Despite trying various methods like using "flex 1" on child items and "flex: 1 0 0%;" on the source, I have not been successful ...

htmlcssflexboxbootstrap-4

Tips on how to slideDown/Up only when a particular element does not contain the error class

In the code snippet below, I am able to slide the sibling div up and down. However, I now want to restrict this behavior when the element within it is assigned an error class. Javascript $('input').on('focus blur', function(e){ ...

javascriptjqueryhtmlcss

Unable to close Bootstrap sidebar menu on mobile devices

I implemented a sidebar menu for mobile that opens when you click on the hamburger icon, with a dark overlay covering the body. The issue I encountered is that on mobile devices, the visibility of the menu does not change when clicked outside of it. It wor ...

javascripthtmlcssshopify

Navigate the div with arrow keys

Looking for an answer similar to this SO post on moving a div with arrow keys, could a simple and clear 'no' be sufficient: Is it possible to turn an overflowing div into a "default scroll target" that responds to arrow-up/down/page-down/space k ...

javascripthtmlcss

Animate the entrance of mobile content as it slides into view while scrolling

I am currently working on a WordPress theme and facing an issue: When I click the hamburger menu without scrolling down the page, the mobile menu slides in smoothly. However, if I scroll down the page, the mobile menu fails to slide into view (I have to s ...

css

Switching from real pixels to CSS pixels

The details provided in Mozilla's documentation on elementFromPoint clarify that the coordinates are specified in "CSS pixels" rather than physical pixels. This raises a question about what exactly CSS pixels entail. Many assume that a pixel in CSS is ...

css

Tips for personalizing the appearance of active bootstrap tabs?

I am currently working on creating a website where Bootstrap tabs will display content according to their unique ID when selected. However, I have encountered an issue where the tab selected does not remain active. I am thinking of creating a custom active ...

javascriptjqueryhtmlcsstwitter-bootstrap

JavaScript loading screen with media query support

I'm currently working on a JavaScript splash screen that features a video background. When the user clicks on the screen, it should smoothly transition to the home page. However, for mobile devices, I want to display an image instead of the video. My ...

javascripthtmlcsssplash-screen

"What's up with this hover script? It seems to be malfunction

I created a hidden div and tried to display it with a hover effect on another div, but it's not working. Here's my code: <html> <head> <title> Welcome to FreeAppzToday </title> <style> #home {background: ...

htmlcsshover

The CSS @media query is failing to function properly

I'm currently developing a web application similar to Spotify for my personal use, but I'm running into some issues with the @media query as it doesn't seem to be working correctly. Here is the CSS code: /* Screen Adapting */ @media (height ...

htmlcssweb-applicationsmedia-queries

Is your webpage slow to respond after a page-refresh? (Delayed HTML rendering causing lag)

Whenever I adjust the screen size to that of a phone or any device smaller than 768px, the search bar doesn't display in its proper position until the page is refreshed. It should be correctly placed right from the start. Furthermore, when I resize th ...

javascriptcsstemplatesprestashopresponsiveness

Error: Attempting to access the style property of an object that is not defined

My goal is to adjust images by clicking buttons. The JavaScript code should update the image style upon button click, but I encounter an error. Surprisingly, when I try the same operation in my console, it works perfectly. Below is the HTML code snippet: ...

javascripthtmlcssstylestypeerror

Implementing Column Wrap Functionality in Bootstrap 4

-> how do I arrange columns in a responsive view with one column followed by another? Please see the attached screenshot for reference on what I want in Bootstrap 4 for iPad view. https://i.sstatic.net/wf83b.jpg @import url('https://fonts.googl ...

csshtmlbootstrap-4

Google Calendar iFrame experiencing overflow issues after rotation on iOS devices

I've managed to successfully embed a Google calendar into a website using an iframe. Everything is scaling properly on various browsers, however, I've encountered an issue with the calendar overflowing vertically when rotating an iPhone from port ...

htmlcss