相关疑难解决方法(0)

有没有解决方案在div中的最后一行添加省略号,流体高度(20%)？

我-webkit-line-clamp在CSS中找到了这个函数,但在我的例子中,行号将取决于窗口大小.

p {
    width:100%;
    height:20%;
    background:red;
    position:absolute;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. …

我创建了一个布局来显示一些文章标题及其状态。文章名称的框具有固定的宽度，我正在使用text-overflow：省略号来剪掉太长的文章名称。另外，我在文章标题的末尾添加了浅灰色的虚线（如果不太长），以使标题和状态之间的差距看起来更好。

问题是： Firefox发现该内容（标题+虚线框）太长，并用省略号将其删除。同时，Chrome会做到这一点，并按我需要的方式工作。

屏幕截图：

对于我来说，Chrome似乎工作方式错误，但这对我很有用。并且firefox可以按照逻辑上的方式工作-在内容过长时剪切内容。但是，为什么要在文本的末尾而不是在容器的末尾剪切它（根据MDN，它应该剪掉它）？

也许我使用的是hack，如果您告诉我另一种实现这种视觉效果的方法（例如我在chrome中），那么我不应该这样做。

最小的例子：

HTML：

<p>
    <span class="left-block overflow-ellipsis">
        Very-very long article name, that would not fit in container
        <span class='dots'></span></span>
    <span class="right-block">
        Published
    </span>
</p>
<p>
    <span class="left-block overflow-ellipsis">
        Not so long article name
        <span class='dots'></span>
    </span>
    <span class="right-block">
        Unpublished
    </span>
</p>

CSS：

body
{
    background-color:white;
}

span.left-block {
    display:inline-block;
    width: 300px;
    border: 1px solid white;

    white-space: nowrap;
    overflow: hidden;
    vertical-align:top;
}

span.left-block:hover
{
    display:inline-block;
    border:1px solid red;
}

span.right-block
{
    display:inline-block;
    vertical-align:top;
} …