省略号并在单行中显示多行文本答案

【问题标题】：ellipsis and showing multiline text in single line省略号并在单行中显示多行文本
【发布时间】：2016-03-11 17:19:54
【问题描述】：

我有一个如下的 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 是使用敲除绑定从 first 、 middle 和 last name 计算出来的。

我曾想过使用 css 来省略全名内容并且省略号正在发生，但全名在 firefox 和 safari 中以多行形式出现。

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

接下来我尝试使用 jquery.dotdotdot.min.js，如下所示，但现在既没有省略号，也没有单行文本。但是我可以通过调试点看到 jquery.dotdotdot.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 来实现这一点

谢谢

【问题讨论】：

标签： jquery css firefox knockout.js safari

【解决方案1】：

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

Example

【讨论】：

添加空格后：nowrap;它在 safari n firefox 浏览器中都能正常工作...非常感谢

【解决方案2】：

/* LESS, SCSS or SASS */

$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 3;

p {
  
  display: -webkit-box;
  max-width: 400px;
  height: $font-size*$line-height*$lines-to-show;
  margin: 0 auto;
  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.&lt;/p&gt;

【讨论】：