Solved

Using an overflow: hidden; and white-space:nowrap; - WITHOUT it affecting the size of a container

Posted on 2012-03-29
2
287 Views
Last Modified: 2012-04-02
Hello,

I have a web app.  It's a Ruby-on-Rails app - but this is more of a CSS question...


I want it to have a table with collapsible cells that have text in them of various lengths.  If the text is longer than the table cell - either before or after the table cell is collapsed to a specific length - I need the text to be hidden behind the edge of the cell.

I can do this - using a CSS with overflow: hidden; and white-space:nowrap;

Trouble is, the table cell - or whatever I put the text into - doesn't size the same - depending on the size of the text.  Longer text makes the container much wider; shorter text doesn't.

Basically, the collapsible container doesn't act the same when it has overflow:hidden text in it.

Is there any way to force the container to behave the same?

Thanks in advance,
Tim
0
Comment
Question by:tmitch68
2 Comments
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 250 total points
ID: 37785557
0
 
LVL 3

Assisted Solution

by:Rameshwar Vyevhare
Rameshwar Vyevhare earned 250 total points
ID: 37786313
try this one.

table
      {
        width:250px;table-layout:fixed;
      }
table tr {
             height:1em;  
             }
td {
     overflow:hidden;white-space:nowrap;  
    }
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

744 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now