CSS: Stop cell text from wrapping within cell - html

Question

JSFiddle: http://jsfiddle.net/wTtsV/7/
In the case of overflow in the example, the text is taken newline. How to hide the text instead of being taken newline? I already tried with overflow: hidden, it does not work.

Answer 1

I had success by adding table-layout:fixed to the table.
Then I added overflow:hidden; white-space:nowrap; to the table cell.
I had to adjust the width percentage due to the way table-layout:fixed renders tables.
#table{
display: table;
width: 100%;
table-layout:fixed;
}
#t2{
display: table-cell;
background-color: green;
width:80%;
white-space: nowrap;
overflow:hidden;
}
Working Example - jsFiddle
EDIT:
Here is another method using floated elements rather than display:table.
A minimum width is set on the container to prevent wrapping when the window is very small.
Caveat:
Granted, this is not perfect as you have to specify a min-width for the container.
If text in the left and right divs can vary unpredictably, it will be difficult to determine what min-width is appropriate to prevent wrapping.
<div id="container">
<div id="t1">some text</div>
<div id="t3">some other text</div>
<div id="t2">aaaaaaaaaa...</div>
</div>
#container {
min-width:200px;
width:100% !important;
width:200px;
}
#t1 {
float:left;
background-color: red;
}
#t2 {
background-color: green;
white-space:nowrap;
overflow:hidden;
}
#t3 {
float:right;
}
http://jsfiddle.net/wTtsV/26/