我用这个HTML创建了一个Codepen http://codepen.io/anon/pen/ewnxG：
<div class="vertically-centered">vertically centered with</div> <div class="vertically-centered">vertically centered with hello</div> <div class="vertically-centered">one line</div>
这个CSS：
.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: -webkit-Box;
-webkit-line-clamp: 2;
-webkit-Box-orient: vertical;
}
.vertically-centered:after {
content: "";
height: 100%;
display: inline-block;
vertical-align: middle;
}
在IE11和Firefox中省略了省略号“…”,这对我来说没问题.在Safari和Chrome中它可以运行.
你看,第一个div不起作用,文本被切断了.第二和第三div工作.所以我的解决方案取决于文本长度.如何在不使用JavaScript的情况下解决此问题？
解决方法
.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! */
}
<div class="vertically-centered">vertically centered with</div> <div class="vertically-centered">vertically centered with hello</div> <div class="vertically-centered">one line</div>
您还可以在edited CodePen example中看到此解决方案的实际应用.
工作原理：您的原始代码已经在基于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;
支持IE10的笔在这里：http://codepen.io/anon/pen/otHdm
：垂直居中方法在第一个“单元格”中不适用于以下原因：对于ilnine级CSS框(如通常的文本,内联块,图像等),vertical-align调整所有此类框的基线形成一个线框(见CSS2.1 spec).计算线框的高度,使线中的所有内联级框都适合它,因此线框的高度不能小于其中最高的内联级框的高度.所以你的：在内联块之后,它获得容器高度的100％,成为块的最后一行中最高的元素,并且由于vertical-align：middle,最后一行中文本的基线被移动以满足垂直中间的文字与这个高大的内联块的中间.当只有一个石灰(这是这种居中的典型用例)以及最后一行被溢出隐藏但是当它可见时不正常时,这是可以的.
