Question

由于我的代码非常少，我将在下面复制它：

<!doctype html>

    <head>

        <style>

            #box{

                position:absolute;
                border:2px solid #CCC;
                width:calc(50vw - 6px);
                height:calc(33vw + 67px);
                overflow:hidden;
           }

       </style>

    </head>


    <body>

        <div id = "box"> A whole lot of text </div>

    </body>

</html>

如你所见，我有一个div（box），它具有动态宽度和高度。我已经隐藏了溢出，但我想某种方式隐藏最后一行，而不是只显示一半的行，在某些情况下。

此外，省略号会很好，但我已经尝试了text-overflow: ellipsis，这似乎只在文本没有换行时起作用。

这不是必要的，但我无法想象为什么不可能。

我在网上找到的所有东西似乎都是固定高度的。我知道如何处理这个问题。

Answer 1

我可能完全错了，但请尝试将其添加到css：

direction: rtl;

就个人而言，我会尝试将其放在表格中，表格应该处理文本换行以及您不想设置的固定高度问题。

Answer 2

如果多行省略号解决了您的问题，我可以为您解决问题......

.line-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

PS：浏览器特定的实现，仅适用于chrome ...

使用动态宽度和高度截断div中的文本

2 个答案: