如何设置省略号对其序号 html,html – 包含省略号和垂直对齐中间的框中的多行...

请检查此简单解决方案,无需额外标记：

.vertically-centered {

border: 1px solid red;

height: 6rem;

overflow: hidden;

font-weight: bold;

font-size: 2.5rem;

text-overflow: ellipsis;

width: 300px;

line-height: 1.2;

display: flex; /* enables centering for modern non-webkit browsers */

flex-direction: column;

justify-content: space-around; /* centers for modern non-webkit browsers */

display: -webkit-Box;

-webkit-line-clamp: 2;

-webkit-Box-orient: vertical;

-webkit-Box-pack: center; /* centers in -webkit-Box automagically! */

}

vertically centered with

vertically centered with hello

one line

工作原理：您的原始代码已经在基于WebKit的浏览器中使用FlexBox布局(事实上,它已经过时了2009年的FlexBox语法,但不幸的是,-webkit-line-clamp不适用于新的实现). FlexBox有自己的垂直居中机制.在基于WebKit的浏览器中获得所需行为所需的只是删除：after伪元素并将以下代码行添加到.vertically居中：

-webkit-Box-pack: center;

对于其他现代浏览器,如Firefox 22和IE11,使用新版FlexBox可以实现相同的布局(除了省略号,但你说它没问题)：

display: flex;

flex-direction: column;

justify-content: space-around;

这必须放在显示的上方：代码中的-webkit-Box,因此Webkit浏览器仍然可以应用-webkit-line-clamp.

您还可以通过添加其前缀版本的FlexBox(2011过渡语法)使其在IE10中工作：

display: -ms-flexBox;

-ms-flex-direction: column;

-ms-flex-pack: center;

：垂直居中方法在第一个“单元格”中不适用于以下原因：对于ilnine级CSS框(如通常的文本,内联块,图像等),vertical-align调整所有此类框的基线形成一个线框(见CSS2.1 spec).计算线框的高度,使线中的所有内联级框都适合它,因此线框的高度不能小于其中最高的内联级框的高度.所以你的：在内联块之后,它获得容器高度的100％,成为块的最后一行中最高的元素,并且由于vertical-align：middle,最后一行中文本的基线被移动以满足垂直中间的文字与这个高大的内联块的中间.当只有一个石灰(这是这种居中的典型用例)以及最后一行被溢出隐藏但是当它可见时不正常时,这是可以的.