Question

基于以下代码，我想知道如何选择适合我在CSS中定义的宽度的最大文本？

现在它显示所有文本，但只显示200px的文本，因为这是我已经定义的。

将来我会有一个XML文件，我有多个文本，而我通过AJAX调用我会读取该文件。

$(".places").each(function (index, item) {
    var obj = $(item).find("span");
    if (obj.length) {
        var placename = $(obj).text();
        if ($(obj).width() > $(item).width() && placename.trim().length > 0) {
            var limit = 0;
            do {
                limit++;
                placename = placename.substring(0, placename.length - 1);
                $(obj).text(placename + "...");
            } while ($(obj).width() > $(item).width() && limit < 1000)
        }
    }
});

Answer 1

作为一个建议，我不知道为什么当CSS具有text-overflow属性时你需要所有这些javascript行：

.overflow {
  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

<div class="overflow">
  A long text like this and all without javascript!
</div>

Answer 2

如果我理解正确，你只想自动打破单词并显示内容溢出的点。幸运的是，你可以通过使用css实现这一点，所以你不必做这种脚本。

您应该像这样使用它：

div.places {
  width : 200px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

I've updated your jsfiddle here

Answer 3

我认为你可以通过使用offsetWidth和一些jquery帮助实现这一点，如下所示：

var longestElement, longestWidth = 0;
$(".places span").each(function (index, span) {

    if ($(span).length) {
        var width = span.offsetWidth;
        if (width > longestWidth && width < 200) {
          longestElement = span;
          longestWidth = width;
        }
    }
    $(span).hide();
});

$(longestElement).show();

我已更新jsfiddle here

如何从类中选择一个文本以适合div的？

3 个答案: