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?

Answer 1

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 li s 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