1

我在让这个布局工作时遇到了一些麻烦。我正在尝试制作这样的东西......我想要一个固定大小的外部包含框，以及其中固定大小的元素。左边应该有一个小的垂直元素，然后是旁边的两行元素。我尝试过使用 display:inline-block、float:left、使用 spans、使用 div、使用列表，而我尝试过的所有东西都有一些问题。

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

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

4

1 回答 1

0

你可以使用text-overflow（见这里）

div.cutMyText
{
  text-overflow:clip;
}

如果文本太长，像这样的插件会自动将文本结尾更改为省略号，

或者

你可以创建一个函数来做同样的事情。这是一个例子。您可以删除+ '...'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;
}

编辑 这是基于您添加的 jsFiddle 和请求的更新 Fiddle ，如果您希望它剪切而不是使用省略号，请查看此处。两者都考虑到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

我在评论中将您的小提琴更新为您想要的。float:left;实际上，我所做的唯一更改是从s中取出s 并将andli添加到s CSS。使用此获取更多信息white-space:nowrap;display:block;ul

在旁注中，我不确定为什么您有这些类型的 ID？对于 CSS，您可以只添加div或li代替添加类或 ID，例如#div

于 2013-07-14T01:31:21.953 回答