I have a fixed width column and a fluid column. In the fluid column, I want to display a string with nowrap so that it does not overflow the container. Here is an illustration of how I want the text to appear:
----------------------------------------------------------
| | |
| 200px | fluid width div fluid width div fluid width ...|
| | |
----------------------------------------------------------
However, when the text becomes too long, the container div expands to show all the text regardless of its length.
Here is my sample code: http://jsfiddle.net/Autociudad/8137gf7g/4/
HTML code:
<div class="table-layout">
<div class="table-cell fixed-width-200">
<p>fixed width div</p>
</div>
<div class="table-cell">
<p class="text">fluid width div fluid width div fluid width div fluid width div fluid width div fluid width div fluid width div fluid width div </p>
</div>
</div>
CSS code:
.text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.table-layout {
display:table;
width:100%;
}
.table-layout .table-cell {
display:table-cell;
border:solid 1px #ccc;
}
.fixed-width-200 {
width:200px;
}
Thank you.