Question

我在使这个布局工作时遇到了一些麻烦。我正在尝试制作像this这样的东西......我想要一个固定大小的外包装盒，以及固定大小的元素。左边应该有一个小的垂直元素，然后是旁边的两行元素。我尝试过使用display：inline-block，float：left，using span，using divs，using lists，以及我尝试过的所有内容都有问题。

我最成功的尝试使用了无序列表和内联块和浮点数：左，它看起来我想要它...除了以下问题。我更喜欢任何超出外盒右侧的内容被切断。正如您在图像中看到的那样，在右上角的单元格中显示了什么适合（“asdf”），并且隐藏了不适合的内容（“g”）。无论我尝试过什么，它要么隐藏整个元素，要么将它推到下一行。我使用了一个普通的垂直无序列表，它的行为就像这样，它会切断底部的任何内容并延伸到外部div之外。

如果这太模糊，我道歉，但有人可能提供一个如何解决这个问题的例子吗？

Answer 1

您可以使用text-overflow（see here）

div.cutMyText
{
  text-overflow:clip;
}

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

OR

你可以创建一个基本相同的功能。 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到你想要的东西。实际上，我所做的唯一更改是从float:left;中取出li并将white-space:nowrap;和display:block;添加到ul的CSS中。 Use this for more info

另一方面，我不确定为什么你有类型的ID？对于CSS，您只需添加div或li，而不是添加#div

等类或ID

CSS布局 - 水平ul问题

1 个答案: