CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Autociudad
Autociudad

Reputation: 103

How to use CSS Overflow: hidden to avoid the parent container grow

I have a fix width column and a fluid column. Inside the fluid column I want to put a string with nowrap and do not show the text outside the container. This is how I like to view the text: 

----------------------------------------------------------
|       |                                                |
| 200px | fluid width div fluid width div fluid width ...|
|       |                                                |
----------------------------------------------------------

but when the text is too long the container div grows and shows all the text no matter how long the text is.

This 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;
}

Thanks.

Upvotes: 0

Views: 297

Answers (3)

Alex W
Alex W

Reputation: 38183

You need to set an explicit width on .text so that it knows which width it should start hiding content after (i.e. how to do the calculation):

.text {
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap;
    width:100px;
}

The white-space:nowrap is preventing it from its normal fluid behavior.

http://jsfiddle.net/8137gf7g/5/

Upvotes: 0

Sai Deepak
Sai Deepak

Reputation: 688

Everything is perfect only you need to set is 

.text
{
display: inline-block;
width: 300px;
white-space: nowrap;
}

Upvotes: 0

Jasper
Jasper

Reputation: 76003

I believe your issue is due to adding display:table to the wrapper element and display:table-cell to the "cells."

Alternatively you can use a float:left for the 200px width cell and remove the custom display settings: http://jsfiddle.net/8137gf7g/7/

.text {
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap;
}
.table-layout {
    width:100%;
}
.table-layout .table-cell {
    border:solid 1px #ccc;
}

.fixed-width-200 {
    float:left;
    width:200px;
}

Upvotes: 2

Related Questions