文本溢出不起作用

Question

我的页面我在面板中有一个面板和一个表，这是我在JSFiddle中的代码

我的代码中存在问题，在td表格中我有文字，我为此设置了text-overflow，但它没有正确显示。它显示如下：

但我想要这样的文字节目：

我该如何解决？

Answer 1

您可以为段落提供一个易于管理的课程：

<p class="text">...............</p>

然后您可以使用以下css属性来完成任务：

.text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;    
    -webkit-line-clamp: 6; 
    -webkit-box-orient: vertical;
}

<强> Updated Fiddle

Answer 2

尝试类似这样的内容， FIDDLE

更改您的代码

从此

.info-table td {
    overflow: hidden;
    text-overflow: inherit;
    white-space: pre-line;
}

至此

.info-table td {
    overflow: hidden;
}

已编辑的代码 FIDDLE

.info-table td p{
    max-height:260px;
    line-height: 18px;
    text-align: justify;
    font-size: 10px;
    font-weight: normal;
}

Answer 3

希望它能帮到你，从td中删除文本溢出和空格。

.info-table td {
overflow: hidden;
}

demo

Answer 4

  

删除css中的white-space: nowrap;属性，您将获得

Answer 5

实际上溢出仅适用于单行，这就是为什么所有内容都缩小到一行。

您可以使用一些jQuery / Javascript库，如http://pvdspek.github.com/jquery.autoellipsis/或尝试使用此tuts的纯css解决方案 http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/

Answer 6

增加div的高度。我认为由于尺寸较小，它显示如此