Ellipsis without fixed width

Question

I'm trying to do something like this :

I have three div with no fixed width. The left (red) and right (blue) areas should have the exact same width as their content (an image). The left and right area can have different width.

The center div will have some text which can be larger than the div and that should have an ellipsis.

The difficulty is that I don't know any width and I'd like to avoid javascript.

ellipsis so far (using css) can only be placed on a single line of test, because you need to use `white-space: nowrap`, otherwise it won't work. — iMoses, Nov 08 '12 at 15:08
To be specific, you want an ellipsis to replace the overflow if the text is wider than the container? — Justin Morgan - On strike, Nov 08 '12 at 15:33

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

HTML:

<div style="width:600px;"> <!-- 600px or the total desired width of the table -->
    <div class="column" style="border-color:red;">
        <img src="http://i.imgur.com/w57Lk.png" />
    </div>
    <div class="column" style="width:100px;">
        lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, 
        lorem ipsum dolor sit amet, lorem ipsum dolor sit amet
    </div>
    <div class="column" style="border-color:blue;">
        <img src="http://i.imgur.com/aPlq6.png" />
    </div>
</div>

CSS:

.column {
    text-overflow: ellipsis;
    height:400px; /* or whatever */
    float:left;
    border:1px solid black;
    overflow:hidden;
    white-space: nowrap; 
}

This uses CSS3, so it may have limited browser support.

Edit:

If you don't know the desired width of the middle column, I don't know any way do that without at least some JavaScript. Fortunately, the JS should be very simple. Using jQuery, and without the style="width:100px;" part in the HTML above:

(function($) {
    var containerWidth = $('.column').parent().width()                         
        - $('.column:first').width() 
        - $('.column:last').width()
        - 6; //6 because the borders add 1px per side, per column
    $('.column:nth-child(2)').width(containerWidth);
})(jQuery);

Working demo on jsFiddle: http://jsfiddle.net/qPbfw/

Thanks for you help, I was hoping that I could avoid javascript for the presentation, but thanks. — Stephane Mathis, Nov 09 '12 at 08:22

Ellipsis without fixed width

1 Answers1

Edit: