HTML CSS, Text ellipsis issue in IE

Posted on 2013-05-10
Last Modified: 2013-05-12
Dear Experts

I've designed a rather big site that took about 4 months, lots of pages, with lots of dynamic data tables. Everything is working well on my client and tested it in IE7 => IE10, FF20, Chrome, Opera and Safari.

I published the site into production, and again the text ellipsis working on FF, Chrome, Opera and Safari, but IE is totally ignoring it.

Tables CSS:
.tblDyneTable { border-collapse: collapse; width: 600px; table-layout: fixed; }
.tbcDATA { width: 100px; height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

Open in new window

Am I missing something here ?
Many thanks in advance.
Question by:Faraj1969
LVL 30

Expert Comment

ID: 39155225
We need a live link or at the very least some rendered HTML and all your CSS.
LVL 10

Accepted Solution

Ishaan Rawat earned 250 total points
ID: 39155584
Try this...

.tblDyneTable {
	border-collapse: collapse;
	width: 600px;
	table-layout: fixed;

.tbcDATA {
	width: 100px;
	height: 20px;
	white-space: nowrap;
	overflow: hidden;

	-o-text-overflow: ellipsis;
	-ms-text-overflow: ellipsis;
	text-overflow: ellipsis;

Open in new window

LVL 53

Assisted Solution

COBOLdinosaur earned 250 total points
ID: 39155618
Ellipsis has never worked correctly or been support to spec in IE..

There is a hyphen hack -ms-text-overflow that might work but don't bet on it IE has been screwing up text-overflow since the beginning of time.


Author Comment

ID: 39156087
OK, LZ1 gave me a hint, so i stripped the software down to one dynamic table with css classes, and populated dummy data (not from SQL), and everything seem to be working fine.

Then I tried to build up the page around it, and I found out that it happens only when I get the data from SQL database.

I also tried second solution, and no change.

Does it make a different if dummy data loaded or from SQL ? I don't get it.


Author Comment

ID: 39159984
Hi again and really sorry for the delay, where I'm located right now, the internet is a big issue.

However, after discussing here and with some of my colleagues, I decided to take another route, by creating a span and measuring the span then trimming it and adding the 3 dots.

This cross browser business is causing me a real headache.

Many thanks all.


Featured Post

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Problem with spacing columns on a row in a table 10 25
Botom of page is wrong color 5 11
Javascript_Set_dropdown_value 7 32
Multiflying 2 Input Text On a Table 7 18
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question