Question

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

这是我的代码：

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

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

Answer 1

如果您只是了解我正在做的事情，我已经实施了快速解决方案，您可以为此问题找到解决方案

我有两种方法，一种是计算行号，另一种是按给定的行号返回确切行中的文本。

通过这种方法，如果行计数器大于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

遵循这些参考资料，

Window.getComputedStyle(...)
Element.clientHeight代替此Element.getBoundingClientRect()
line-height
box-sizing
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不太

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

2 个答案:

遵循这些参考资料，

解决方案