Question

我有一个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.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");
                }
            });

Kndly告诉我哪里出错了，或者是否有其他方法可以实现相同的功能。除了表格具有可调整大小的列，因此在增加和减少表格列的宽度时，文本应自动变为椭圆和非椭圆。

这就是为什么我想通过firefox和safari浏览器的一些css来实现这个目的

由于

Answer 1

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

Example

Answer 2

＆＃13;

/* 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;
}

＆＃13;

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.</p>

＆＃13;

省略号并以单行显示多行文本

2 个答案: