如何为固定数量的文本行设置元素高度

Given some text that occupies about 10 rows, how can I resize its container to only show the first 3 rows and hide the others? Apparently this works, but I think it is not reliable:

如果一些文本占用了大约10行，那么如何调整其容器的大小，只显示前3行并隐藏其他行呢?显然这是可行的，但我认为它不可靠:

.container {
    height: 7.5ex; /* 2.5ex for each visible line */
    overflow: hidden;
}

Can I rely on the fact that height of one row = 2.5ex or is that just a coincidence in the browsers I am using to test?

我是否可以相信一行的高度= 2.5ex，或者这只是我用来测试的浏览器中的巧合?

4 个解决方案

#1

If you are going to use this you should ensure the line-height is always 2.5ex

如果你要使用这个，你应该确保线高总是2.5ex

.container {
  line-height: 2.5ex;
  height: 7.5ex; /* 2.5ex for each visible line */
  overflow: hidden;
}

Demo

演示

#2

The ex unit is the font x-height (height of its x character). I would not use this here. You should use the em unit. This is the actual font-height. The font-height is defined by setting the line-height property. So:

ex单位是字体x-height(其x字符的高度)。我不会用这个。你应该使用em单元。这是实际的字体高度。通过设置line-height属性来定义字体高度。所以:

.container {
    height: 3em; /* 1em for each visible line */
    overflow: hidden;
}

Here is some more info on CSS length units: http://www.w3.org/TR/CSS21/syndata.html#length-units

这里有更多关于CSS长度单位的信息:http://www.w3.org/TR/CSS21/syndata.html#length-units

#3

you can set the line height of a text and with it knows the exact height of each row and set desired height of your container, simply doing this:

您可以设置文本的行高度，并且它知道每一行的精确高度，并设置您的容器所需的高度，只需这样做:

.container {
    line-height:25px;
    height:75px;
    overflow:hidden;
}

Now everything works rightly :)

现在一切都很正常:

#4

You can use the webkit property line-clamp

您可以使用webkit属性line-clamp

.container {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
}

It doesn't work on all browsers, but hopefully it will one day.

它并不是在所有浏览器上都能工作，但希望有一天它会工作。

#1