1

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

sasklacz
  • 3,610
  • 10
  • 39
  • 58
  • Not understand your problem. – frosty Oct 10 '15 at 02:25
  • If I'm understanding correctly, and you want elements to not have whitespaces in between them, you will have to set the body's font-size to 0, before setting font-size back to whatever font-size you want on the element with contents in them. – frosty Oct 10 '15 at 02:26
  • You want to change the width of the img? Why not just set the width of the image to whatever px you want it to be then? o.O – frosty Oct 10 '15 at 03:22
  • No, the container with the image is bigger than the image itself. But that's not relevant. – sasklacz Oct 11 '15 at 04:40

2 Answers2

1

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:

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
0

Okay, I literaly just understand what you were trying to do. Do, something like:

div {
    border: 1px solid black;
    width: 50px;
    overflow: hidden;
    white-space: nowrap;
}
<div>one two three four five six seven eight nine ten</div>

Basically white-space: nowrap makes it so that it doesn't wrap at whitespaces.

frosty
  • 2,559
  • 8
  • 37
  • 73
  • For future references, you'll get answers must faster if you come up with shorter example codes, as oppose to showing us a giant post of your original code. – frosty Oct 10 '15 at 03:35
  • Hmm I can't recall posting a giant piece of code here. Still thanks for your help. – sasklacz Oct 12 '15 at 08:22