jquery - 省略号并在单行中显示多行文本

我有一个HTML文件，如下所示。我需要省略fullName或Patient Id的内容，并且内容应在Firefox和Safari浏览器中排成一行。我尝试了CSS和JS选项，但没有任何解决方案能够解决我的目的。

    <table>
                        <tbody data-bind="foreach: patients">
    <tr>
                                <td style="width: 22%;" ><span class="spanHeaderElement" data-bind="text: $data.fullName"></span></td>
                                <td style="width: 12%;" ><span class="spanHeaderElement" data-bind="text: $data.patientID"></span></td>
    </tr>
    </tbody>
    </table>

使用敲除绑定从名字，中间名和姓氏中计算出fullName。

我想到了使用CSS来省略全名内容，并出现了省略号，但是在Firefox和Safari中多行出现了全名。

.spanHeaderElement{
    overflow: hidden;
    text-overflow: ellipsis;
    position:relative;
    line-height:1.4em;
    height:2.8em;
}

接下来，我尝试如下使用jquery.dotdotdot.min.js，但是现在既没有省略号也没有一行文字。但是，正如我通过调试点所看到的，jquery.dotdotdotdot.min.js文件正在被调用。

// added in js file to ellipse the fullname.
$(".spanHeaderElement").dotdotdot({
                ellipsis    : '... ',
                fallbackToLetter: true,
                watch       : true,
                callback    : function( isTruncated, orgContent ) {
                    console.log("inside ellipsis callback");
                }
            });

告诉我我哪里出错了，或者还有什么其他方法可以实现同样的功能。除了表格具有可调整大小的列之外，因此在增加和减小表格列的宽度时，文本应自动省略和省略。

这就是为什么我在考虑通过FireFox和Safari浏览器的某些CSS实现此功能的原因

谢谢

最佳答案

text-overflow:ellipsis需要与white-space:nowrap;结合使用。尝试将其添加到您的样式中，它应该可以工作。您可能还需要将span设置为块元素并为其设置宽度

Example

关于jquery - 省略号并在单行中显示多行文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23335144/