Search code examples
htmlcssoverflowword-wrap

white-space property breaks the elements widths

So the initial thing that I wanted to achieve was to get two elements stacked together side-by-side where both of them will take the full available height, one of them has a fixed width and the width of the container varies. The left element contains an image (70px wide) but the whole element should be 200px wide. The right element should only fit one line of the text and any overflowing text should be clipped showing ....

HTML:

<div class="wrapper-wrapper">
    <div class="wrapper">
        <div class="left">
            <image src="http://s4.postimg.org/i1huts8vt/kitten.png" />
        </div>
        <div class="right">
            Text row 1 is a very freaking wide row with tons of text so deal with it or gtfo. Do I have enough text to fill this box now ?

        </div>
    </div>
</div>

aaand css :

.wrapper-wrapper {
    width: 600px;
}
.wrapper {
    border:1px solid #aaa;
    margin:0 0 10px 0;
    display: table;
    width: 100%;
}

.left {
    width:200px;
    background-color:#eee;
}

.left, .right {
    display: table-cell;
    padding:5px;
}

.right {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

A runnable demo :

http://jsfiddle.net/nLgqsxLg/2/

So I decided to achieve the vertical stacking by using a combination of display: table/table-cell. And use overflow and text-overflow to clip the overflowing text. The problem is that the moment I set the white-space property (as according to PPK https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow) the widths of the elements are omitted.

UPDATE

Ok so I've updated the code. Let's say that my wrapper-wrapper is 600px wide. Then the left div should be 200px wide and the right should fill whatever space is left (400px). Text in the right div should be clipped to 400px and right now the div grows to fit all of it inside.

How it is : enter image description here

How I wanted it to be :

enter image description here

Solution

  • The problem isn't the white-space property. That part is fine. Here's why it's not working:

    1. You have the display set to table-cell. text-overflow only works on block container elements. table-cell doesn't meet this requirement.
    2. You haven't defined a width for the ellipsis container (.right), which is also a requirement.

    Your code:

    .right {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

    Try this:

    .right {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    width: 375px;
}

    DEMO: http://jsfiddle.net/nLgqsxLg/4/

    Further reading: