如何在两行之后添加省略号？

Question

我们可以在两行文本之后添加省略号吗？我可以在一行中添加省略号，但如果文本很大，我希望它在两行中显示文本。如果文本比这更大，我想在第二行之后显示一个省略号。

这是我的代码：

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

它与此不同，因为它在第二行。有关此的任何更新？

Answer 1

如果您只是了解我在做什么，我已经实施了一个快速解决方案，您可以获得此问题的解决方案

我有 2 种方法，一种是计算行号，另一种是根据给定的 lineNumber 在确切的行中返回文本。

通过这种方法，如果行计数器大于 2，则获取前 2 行文本创建另一个模板并将其附加到容器中

Here is my Fiddle

$( 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";
    });  



});

Answer 2

根据这些参考资料，

1. Window.getComputedStyle(...)
2. Element.clientHeight 而不是这个Element.getBoundingClientRect()
3. line-height
4. box-sizing
5. text-overflow（请检查浏览器支持）

解决方案

我提供了这个方法，因为你的元素只有纯文本（我无意挑战我们的计算）

<style>
    div /** dont' fail to note that I've remove the white-space property **/
    {
        border: 1px black dotted; /** just to see the borders **/
        box-sizing: content-box; /** this is very important, see the doc OR you will have to fetch and convert the padding-top and padding-bottom in your `new height` calculations **/
        text-overflow: ellipsis;
        overflow: hidden;
        width: 220px;
    }
</style>
<div>
    Mollit sint adipisicing ipsum mollit duis dolor consectetur ullamco magna esse.
    Tempor voluptate qui pariatur anim occaecat sunt laborum sunt dolore id.
    Aliquip excepteur aute nulla duis eu cillum.
    Lorem ad aute aliquip cillum.
    Lorem ea dolore laboris pariatur adipisicing duis eiusmod labore elit Lorem incididunt consectetur consequat.
</div>
<script>
    +function()
    {
        'use strict';
        var element = document.querySelector('div');
        var style = element.ownerDocument.defaultView.getComputedStyle(element); // Why using `element.ownerDocument.defaultView` because the element may come from a different window, like iframe
        var lineHeight = parseInt(style.lineHeight.replace(/[a-z]+$/)); // I could have said /px$/ but the doc from MDN says nothing about the standard units

        // Here the magic
        var NUMBER_OF_LINES_TO_SHOW = 2;
        element.style.height = (NUMBER_OF_LINES_TO_SHOW * lineHeight) + "px"; // or the unit in use for that browser
    }();
</script>

（在这些测试中，我从firefox 45.0.2 更新到firefox 46）并重新启动了浏览器...在无法正常工作的扩展中，似乎text-overflow 不太合适