如何从类中选择文本以适合div的使用？

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

现在它显示所有文本，但只显示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) 
     } 
    } 
});

来源

2015-12-16 Markus Hayner

为什么你不使用CSS文本溢出：椭圆sis'并保存所有js行，并使其更好的性能和更清洁？ –

我很困惑你的问题和小提琴。你想要它做什么，它还没有做？ – andi

例如，我有一个容器300x250和多个文本。一行中文本的宽度不小于300像素或更大。我想计算我的文字的宽度，然后只显示适合300px的文字。正如在我的JSFiddle中，您可以看到第一个文本小于200像素，但同时恰好适合第二个文本。而第三个文本没有。在这种情况下，它应该只显示第二个文本。 –

作为一个建议，我不知道为什么你需要的JavaScript的所有这些线时CSS有text-overflow属性，以使相同的：

.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>

来源

2015-12-16 15:53:37

阅读我上面的评论，你会明白为什么我用JS来定义这个。 –

也许你必须通过这种模式在帖子中解释，而不是在评论中。不过，我向你发表评论，这是非常真实的。你将有许多问题和奇怪的行为与你想达到的目标。 –

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

你应该使用这样的：

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

I've updated your jsfiddle here

来源

2015-12-16 15:53:57

如果我理解正确，您只需显示长度最长的文本行，但这也适合框的200px宽度。是对的吗？因此，在你的jsfiddle中，将显示的唯一一行文本将是第二行，因为它是不超过框宽度的最长的文本行。是？ –

@StephanieKendall那是真的。这就是我想要的 –

好吧，现在我明白了，请参阅我的其他答案以解决问题。 –

我想你可以通过使用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

来源

2015-12-21 17:32:49

如何从类中选择文本以适合div的使用？

回答

相关问题