如何后两行加省略号？ [英] How to add ellipsis after two lines?

问题描述

我们能后两行文字添加一个省略号？我能够在一行中添加省略号，但如果文字是大我希望它在两行显示的文字。如果文本比更大我想说明的第二行之后的省略号。

Can we add an ellipsis after two lines of text? I am able to add ellipsis in one line, but if the text is large I want it to display the text on two lines. If the text is even bigger than that I want to show an ellipsis after the second line.

下面是我的code：

.columnFontfamily{
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
}

有与此不同，因为它在这方面第二line.Any更新？

It is different from this because it and in second line.Any update regarding this ?

推荐答案

我有实现快速的解决方案，如果你只是知道我在做什么，你可以得到一个解决这个问题。

I have implement a quick solution if you just understand what I am doing you can get a solution for this problem

我有2个方法之一是计算行号，另一条由下式给出LINENUMBER返回的确切行文本。

I have 2 methods one is counting line numbers, the other one returns text in the exact line by given lineNumber.

通过这种方法，如果行计数器大于2，则获得第2行文字创建另一个templete并将其附加到容器

by this approach if line counter greater than 2, then get the first 2 lines of text create another templete and append it to container

这里是我的小提琴

$( document ).ready(function() {

    function countLines() {
        var divHeight = parseInt( $(".maxTwoLine").height() );
        var lineHeight = parseInt($('.maxTwoLine').css('line-height'));
        return divHeight/lineHeight;
    }

    function GetTextLine(lineNumber){
        var lines = $('.maxTwoLine').text().split(' ');
        console.log(lines);
        for(var i = 0;i < lines.length;i++){
            if(i === lineNumber)
            {
                return lines[i];
            }
        }        
    }

    $(".clickB").click(function(){
        var lineCounter = countLines();
        if(lineCounter>1)
        {
            var allText = $('.maxTwoLine').text();
            var firstLineText = GetTextLine(0);
            var secondLineText = GetTextLine(1);
            var template = firstLineText + '<div class="ellipsisText">' + secondLineText + '</div>';         
            $('.maxTwoLine').text("");
            $('.maxTwoLine').append(template);
            allText = allText.replace(secondLineText, template);
        }
        var container = ".maxTwoLine";
    });  



});

这篇关于如何后两行加省略号？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！