我可以完全隐藏半截的文本行吗？答案

【问题标题】：Can I completely hide lines of text that are half cut off?我可以完全隐藏半截的文本行吗？
【发布时间】：2016-05-25 18:44:20
【问题描述】：

如果我将一段文本放入具有设定高度和隐藏溢出的容器中，我通常会以可能适合被截断的最后一行结束。 Example jsFiddle或图片：

有没有办法让那条线不完全出现而不是发生这种情况？

场景是我有 动态高度的列（父高度的 100%，即身体高度的 80%）包含博客文章文本，我想显示一个如果文本溢出（易于确定），则在底部“全部阅读”。目前它看起来很糟糕，上面有一半渲染的文本。

我无法移除溢出，因为列需要在位于页面底部的导航之前结束。

【问题讨论】：

标签： css

【解决方案1】：

您可以从 text-overflow 属性中获得灵感，但您必须使用 JavaScript 来实现多行：http://pvdspek.github.com/jquery.autoellipsis/（通过 With CSS, use "..." for overflowed block of multi-lines）

【讨论】：

有没有不包含jquery的解决方案？

【解决方案2】：

下面是我的代码

 <li style="color: Black; font-weight: bold; oveflow:hidden; line-height: 1.2em;height: 2.6em; ">Page Size
                    <select id="ddlOrderstoDisplay" style="width: 50px;">
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="75">75</option>
                        <option value="100">100</option>
                        <option value="150">150</option>
                    </select>               
                </li>

我将这些行放在标签中，它将适用于所有浏览器。希望对您有所帮助

**overflow: hidden;
line-height: 1.2em;
height: 3.6em;**

【讨论】：

【解决方案3】：

您可以增加或减少line-height

根据您的舒适度

【讨论】：

如何动态设置合适的line-height？此外，当屏幕上有 5 个行高不同的列时，从一致性的角度来看，这可能看起来不太好。
我没有得到..为什么你给不同的行高？？所有 5 列应具有相同的行高
是的，虽然这仍然让我想到了计算动态空间中的行高应该是多少的问题。

【解决方案4】：

删除overflow:hidden

div
{
    width: 100px;
    height: 92px;
    background: black;
    color: white;
}

【讨论】：

【解决方案5】：

只需添加 'column-width' 属性，它就会起作用。在您的示例中，它将 column-width:100px

【讨论】：