-webkit-line-clamp 未按应有的方式切割

Question

我正在设置一个横幅，并使用 webkit-box （-webkit-line-clamp、-webkit-box-orient、overflow、text-overflow）来隐藏 4 行后的省略号并隐藏下面的所有内容。省略号显示在第四行的末尾，但文本在此之后继续显示整行以及之后的行顶部。

我一直在通过更改元素中的属性并在谷歌上搜索解决方案来摆弄它，但我的能力不够，我需要一些帮助来找出导致我的代码中出现这种情况的原因。 元素代码：

    text-align: justify;
    margin: 0 0 8px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 8px;
    margin-left: 0px;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
    line-height: 1.2;

Answer 1

拉姆桑-克罗格-安德森， 就我而言，发生这种情况是因为用于截断文本的 css 添加在 h4 元素（保存文本）的直接父元素上，所以我必须简单地从父元素中删除该样式并将其直接应用到 h4 元素。

<div class="panel panel-default workspace-container">
    <h4 class="workspace-text"><% workspace.workspace_name %></h4>
</div>

我的更改最初在 Firefox 上运行良好，但导致了您在 chrome 浏览器中提到的问题，例如省略号后存在文本。

修复后，我的CSS看起来像这样：

.workspace-text {
    font-weight: bold;
    font-size: 16px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
}

希望它也对其他人有帮助。