CSS布局——横向ul题

Question

我在使用此布局时遇到了一些问题。我正在尝试制作类似 this 的东西...我想要一个固定大小的外部容器，里面有固定大小的元素。左边应该有一个小的垂直元素，然后是旁边的两行元素。我尝试过使用 display:inline-block、float:left、使用 span、使用 div、使用列表，但我尝试过的所有方法都有问题。

我最成功的尝试是使用无序列表、内联 block 和 float:left，它看起来正是我想要的……除了以下问题。我希望任何超出外框右侧的内容都被切断。正如您在图像中看到的，在右上角的单元格中显示适合的内容(“asdf”)，不适合的内容隐藏(“g”)。无论我尝试过什么，它要么隐藏整个元素，要么将它推到下一行。我使用了一个普通的垂直无序列表，它的行为就像这样，它切断了底部的任何内容并延伸到外部 div。

如果这太含糊，我深表歉意，但有人可以提供一个如何解决这个问题的例子吗？

Answer 1

您可以使用 text-overflow ( see here )

div.cutMyText
{
  text-overflow:clip;
} 

一个插件 like this one如果文本太长，自动将文本结尾更改为省略号，

或

您可以创建一个函数来完成本质上相同的事情。 Here's an example of that .您可以删除 javascript 第 64 行的 + '...' 以截断文本

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;
}

编辑 Here is an updated Fiddle根据您添加的 jsFiddle 和请求，如果您希望它剪切而不是使用省略号，look here .两者都考虑了 text-transform 属性

更新后的 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;
}

编辑2

I updated your Fiddle in the comments到你似乎想要的。实际上，我所做的唯一更改是从 li 中删除 float:left; 并添加 white-space:nowrap; 和 display:block; 到 ul 的 CSS。 Use this for more info

附带说明一下，我不确定您为什么有这些类型的 ID？对于 CSS，您可以只放置 div 或 li 而不是添加类或 ID，如 #div