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

问题描述

我们可以在两行文字后面添加省略号吗？我可以在一行添加省略号，但如果文本是大的，我想让它在两行显示文本。

这是我的代码：

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

不同于此，因为它和第二行。 遵循这些参考，

1. Window.getComputedStyle（...）


2. Element.clientHeight a>而不是 Element.getBoundingClientRect（）


3. line-height a>


4. box-调整大小


5. text-overflow （请检查浏览器支持）

解决方案

我提供这种方法，因为你的元素只有平面文本（我的意思没有挑战我们的计算）

 < style> 
 div / **没有注意到我删除了空格属性** / 
 {
 border：1px black dotted; / **只是为了看到边框** / 
 box-sizing：content-box; / **这是非常重要的，看到doc或你将不得不提取和转换padding-top和padding-bottom在你的新高度计算** / 
 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）; //为什么使用`element.ownerDocument.defaultView`，因为元素可能来自不同的窗口，如iframe 
 var lineHeight = parseInt（style.lineHeight.replace（/ [a-z] + $ /））; //我可以说/ px $ /，但是MDN的文档没有说明标准单位
 
 //这里的神奇
 var NUMBER_OF_LINES_TO_SHOW = 2; 
 element.style.height =（NUMBER_OF_LINES_TO_SHOW * lineHeight）+px; //或浏览器使用的单位
}（）; 
< / script> 
  

（在这些测试期间，我从 firefox 45.0.2 到 firefox 46 ）并重新启动浏览器...在扩展不工作，似乎 text-overflow 不太太

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.

Here is my code:

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

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

解决方案

Following these references,

1. Window.getComputedStyle(...)
2. Element.clientHeight instead of this Element.getBoundingClientRect()
3. line-height
4. box-sizing
5. text-overflow (please, check browser support)

The solution

I provide this method, given that you element have only flat text (I means nothing to challenge our calculations)

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

(During these tests, I updated from firefox 45.0.2 to firefox 46) and restarted the browser... Among extensions not working, seem text-overflow isn't too

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