CSS layout - horizontal ul questions

Question

I'm having some trouble getting this layout to work. I'm trying to make something like this ...I'd like an outer containing box of a fixed size, and fixed-size elements within it. There should be a small vertical element on the left, and then two rows of elements next to that. I've tried using display:inline-block, float:left, using spans, using divs, using lists, and everything I've tried has had some problem.

My most successful attempt used an unordered list and inline-block and float:left and it looked exactly how I want it....except for the following problem. I'd prefer for any content that extends past the right of the outer box to be cut off. As you can see in the image, in the top right cell what fits is shown ("asdf"), and what doesn't fit is hidden ("g"). No matter what I've tried, it either hides the whole element, or it pushes it down to the next line. I've used a normal vertical unordered list and it behaves just like this, it cuts off whatever is at the bottom and extends past the outer div.

I apologize if this is too vague, but can someone maybe provide an example of how to go about this?

Sorry, here's a jsfiddle: http://jsfiddle.net/yGEwK/ This one works as I'd like it to. The problem comes in not with the text overflowing, but if the li width is too great. In this one http://jsfiddle.net/NFwYT/ I've changed the width to be slightly bigger, and instead of cutting off the excess, it messes up the whole layout. I'd like it instead to just show as much as possible, and hide the rest. Hopefully that clears things up a little. — Kevin, Jul 14 '13 at 01:42
I think the problem is trying to both force the elements to hide the overflow, but also have a second row of them. white-space:nowrap seems to fix my overflow problem, but I don't know how to then get a second row of elements. Do I need to just abandon the ul and use divs to do this? — Kevin, Jul 14 '13 at 02:30
I updated my solution to fit your requests. In practice it's pretty non-important because the fix is kind of complex, I wouldn't worry about it in use much often because content is rarely dynamic and in need of it at the same time — Zach Saucier, Jul 14 '13 at 03:02

score 0 · Answer 1 · edited May 23 '17 at 11:44

You can either use text-overflow (see here)

div.cutMyText
{
  text-overflow:clip;
}

A plugin like this one to auto change the end of text to an ellipsis if it's too long,

OR

you can create a function to do essentially the same thing. Here's an example of that. You can remove the + '...' on line 64 of the javascript to just cut off the text

var txt = $(".cut").html();
trimText();

$(window).bind('resize', function(){
    trimText();
})

function trimText(){
    var totalWidth = $(window).width();
    var linkWidth = $(".link").width();
    var textWidth = totalWidth - linkWidth - 20;    
    var trimmedText = getTextThatFits(txt, textWidth, "Times New Roman", 12);
    $(".cut").html(trimmedText);
}

function getTextThatFits(txt, w, fSize, fName, fWeight) {
    if (fWeight === undefined)
        fWeight = "normal";

    var auxDiv = $("<div>").addClass("auxdiv").css ({
        fontFamily : fName,
        fontSize : parseInt(fSize) + "px",
        position: "absolute",
        height: "auto",
        marginLeft : "-1000px",
        marginTop : "-1000px",
        fontWeight: fWeight,
        width: "auto"
    })
    .appendTo($("body"))
    .html(txt);

    var ww = (auxDiv.width() + 1);
    var str = txt;

    auxDiv.html(" ...");
    var w2 = (auxDiv.width() + 1) + "px";
    if (w2 > w){
        auxDiv.remove();
        return "";
    }

    if (ww > w)
    {
        var i = 1;
        var p, u;
        var sol = 0;
        p = 1; u = txt.length;

        while (p <= u)
        {
            i = (p + u) >> 1;
            str = txt.slice(0, i);
            str += "...";
            auxDiv.html(str);
            ww = (auxDiv.width() + 1);
            if (ww <= w) {
                sol = i;
                p = i + 1;
            }
            else u = i - 1;
        }

        str = txt.slice(0, sol) + "...";
    }
    $(".auxdiv").remove();
    auxDiv.remove();
    return str;
}

EDIT Here is an updated Fiddle based on your added jsFiddle and requests and if you want it to cut instead of use ellipses, look here. Both take account of text-transform properties

The updated jQuery:

var trans =  $('.Liclass.cut').css('text-transform');
var txt;
if( $('.Liclass.cut').css('text-transform') === 'uppercase')
    txt = $(".cut").html().toUpperCase();
else { txt = $(".cut").html(); }


trimText();

$(window).bind('resize', function () {
    trimText();
});

function trimText() {
    var totalWidth = $(this).width();
    var trimmedText = getTextThatFits(txt, totalWidth - 20, "Times New Roman", 12, trans);
    alert(trimmedText);
    $(".cut").html(trimmedText);
}

function getTextThatFits(txt, w, fSize, fName, fWeight, txtTrans) {
    if (fWeight === undefined) fWeight = "normal";

    var auxDiv = $("<div>").addClass("auxdiv").css({
        fontFamily: fName,
        fontSize: parseInt(fSize) + "px",
        position: "absolute",
        height: "auto",
        marginLeft: "-1000px",
        marginTop: "-1000px",
        fontWeight: fWeight,
        textTransform: txtTrans,
        width: "auto"
    })
        .appendTo($("body"))
        .html(txt);

    var ww = (auxDiv.width() + 1);
    var str = txt;

    if (ww > w) {
        var i = 1;
        var p, u;
        var sol = 0;
        p = 1;
        u = txt.length;

        while (p <= u) {
            i = (p + u) >> 1;
            str = txt.slice(0, i);
            str;
            auxDiv.html(str);
            ww = (auxDiv.width() + 1);
            if (ww <= w) {
                sol = i;
                p = i + 1;
            } else u = i - 1;
        }

        str = txt.slice(0, sol);
    }
    $(".auxdiv").remove();
    auxDiv.remove();
    return str;
}

Edit 2

I updated your Fiddle in the comments to what you seem to want. Really the only changes I made were taking out the float:left; from the lis and adding white-space:nowrap; and display:block; to the ul's CSS. Use this for more info

On a side note I'm not sure why you have ID's for the types? For the CSS you can just put div or li instead of adding classes or IDs like #div

Thanks for the response, but I don't think that's what I need. I'm sorry, let me try to explain again. The issue is with the width of the
And here's the same list turned sideways: http://jsfiddle.net/mYGKS/ When it overflows, it goes down to the next line. If you change it to hidden, it leaves a blank space at the end because it makes the whole item disappear. I want it to remain partially visible, like it does in the vertical list. — Kevin, Jul 14 '13 at 03:33

CSS layout - horizontal ul questions

1 Answers1