Question

我的容器具有动态内容和多行文本。如果文本不适合容器，我想显示省略号（...）。它也应该在中间垂直对齐。

我使用此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中，省略号＆＃34; ...＆＃34;不见了，这对我没问题。在Safari和Chrome中，它可以正常运行。

你看，第一个div不起作用，文字被切断了。第二个和第三个div有效。所以我的解决方案取决于文本长度。如何在不使用JavaScript的情况下解决此问题？

Answer 1

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

＆＃13;

.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! */
}

＆＃13;

<div class="vertically-centered">vertically centered with</div>
<div class="vertically-centered">vertically centered with hello</div>
<div class="vertically-centered">one line</div>

＆＃13;

＆＃13; 您还可以在edited CodePen example。

中查看此解决方案

工作原理：您的原始代码已经在基于WebKit的浏览器中使用Flexbox布局（实际上，它已经过时了2009年的Flexbox语法，但不幸的是，{{1}没有使用新的实现）。 Flexbox有自己的垂直居中机制。在基于WebKit的浏览器中获得所需行为所需的只是删除-webkit-line-clamp伪元素，并将以下代码行添加到:after：

.vertically-centered

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

   -webkit-box-pack: center;

这必须放在代码中display: flex; flex-direction: column; justify-content: space-around;之上，因此Webkit浏览器仍然可以应用display: -webkit-box。

您还可以通过添加其前缀版本的Flexbox（2011过渡语法）使其在IE10中运行：

-webkit-line-clamp

支持IE10的笔位于：http://codepen.io/anon/pen/otHdm

display: -ms-flexbox; -ms-flex-direction: column; -ms-flex-pack: center;垂直居中方法在第一个＆＃39;单元格中并不适合您。由于以下原因：对于ilnine级别的CSS框（如通常的文本，内联块，图像等）:after调整构成行框的所有此类框的基线（请参阅{ {3}}）。计算线框的高度，使线中的所有内联级框都适合它，因此线框的高度不能小于其中最高的内联级框的高度。因此，获得容器高度100％的vertical-align内联块成为块中 last 行中最高的元素，并且因为:after的基线最后一行中的 text 被移动以满足文本的垂直中间位置，并具有此高内联块的中间位置。当只有一个石灰（这是这种居中的典型用例）和最后一行用vertical-align: middle隐藏时，这是可以的，但是当它可见时则不行。< / p>

Answer 2

在这里你可以找到一个简化的解决方案：

.vertically-centered {
  margin: 0 auto;
  border: 1px solid red;
  font-size: 50px;
  width: 300px;
  display: -webkit-flex;
  -webkit-align-items: center;
}

.vertically-centered p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 106px; /* set max-height for ie */
}

这样的标记：

<div class="vertically-centered"><p>vertically centered with</p></div>
<div class="vertically-centered"><p>vertically centered with hello</p></div>
<div class="vertically-centered"><p>one line</p></div>

示例：http://codepen.io/srekoble/pen/pHgjf

正如您将看到的那样，您可以将文本包装在p标记内，以便将truncate方法应用于p标记，将垂直对齐方法应用于div标记

Answer 3

这是可以实现的，但需要对标记进行一些更改。

在文字

div

使用以下规则添加.vertically-centered div选择器：
- display: inline-block;作为非webkit浏览器的后备，是垂直对齐所必需的
- display: -webkit-inline-box; for webkit browsers
- max-height: 100%;以确保div只是文本的高位，如果它小于容器，并且如果容器的长度大于容器，则高达容器
- vertical-align: middle;以确保div位于容器的中间
将负责省略号的规则从.vertically-centered移至.vertically-centered div

为什么需要额外的div？

文本本身是内联的，因此只有最后一行与伪元素:after垂直对齐。所以：

第一个例子看起来不对，因为“居中”一行垂直对齐到伪元素的中间。
第二个例子看起来不错，因为隐藏的“hello”正在垂直对齐，其他线条恰好适合盒子。
第三个例子是使用此方法在中间实际垂直对齐的唯一一个例子。

要清楚地看到此操作将.vertically-centered:after更改为.vertically-centered:before，您会看到现在第一行“垂直”位于中间。

添加额外容器允许其整个文本内容垂直对齐而不是仅一行。

密码笔： http://codepen.io/anon/pen/htbxA

.vertically-centered {
        border: 1px solid red;
        height: 6rem;
        overflow: hidden;
        font-weight: bold;
        font-size: 2.5rem;
        width: 300px;
        line-height: 1.2;
    }

    .vertically-centered:after {
        content: "";
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }

    .vertically-centered div {
        display: inline-block;
        display: -webkit-inline-box;
        max-height: 100%;
        vertical-align: middle;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

<div class="vertically-centered"><div>vertically centered with</div></div>
    <div class="vertically-centered"><div>vertically centered with hello</div></div>
    <div class="vertically-centered"><div>one line</div></div>

Answer 4

我改变了你的CSS。我在.vertically居中的div中添加了一些填充，并设置了.vertical居中的宽度：在div和presto之后！我认为问题在于没有定义宽度。在中心之后：在div之后。这是我的解决方案

 .vertically-centered {
    border: 1px solid red;
    height: 6rem;
    overflow: hidden;
    padding: 10px;
    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: auto;
    width: 100%;
    display: inline-block;
    vertical-align: middle;

}

我希望这有帮助！

Answer 5

如果您将文本放在<p></p>内的div中并添加：

.vertically-centered p {
  margin: 0;
  display:block;
  transform: translateY(-50%);
  top:50%;
  position:relative;
}

然后它应该做的伎俩。

Answer 6

如果您希望在Internet Exporer中使用它，则无法使用。

Here是一些适用于IE的示例：

淡出方式（CSS！）
Clamp.js Way（javascript）
TextOverflowClamp.js Way（javascript）

我个人使用http://dotdotdot.frebsite.nl/

框中有多行，有省略号和垂直对齐的中间

6 个答案: