Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


HTML CSS, Text ellipsis issue in IE

Posted on 2013-05-10
Medium Priority
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 1000 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 1000 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

577 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