Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2012-03-29
2
Medium Priority
?
308 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 40

Accepted Solution

by:
Gurvinder Pal Singh earned 1000 total points
ID: 37785557
0
 
LVL 3

Assisted Solution

by:Rameshwar Vyevhare
Rameshwar Vyevhare earned 1000 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

New benefit for Premium Members - Upgrade now!

Ready to get started with anonymous questions today? It's easy! Learn more.

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

719 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