ellipsis and showing multiline text in single line

Question

I have one HTML file as below. I need to ellipse the fullName or Patient Id content and content should come in one line in firefox and safari browser. I tried css and JS options but nothing is solving my purpose.

    <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 is getting computed from first , middle and last name using knockout binding.

I thought of using css to ellipse the full name content and ellipsis is happening but full Name is coming in multiple line in firefox and safari.

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

Next I tried to use jquery.dotdotdot.min.js as below but now neither ellipsis is happening nor text is coming in single line. But jquery.dotdotdot.min.js file is getting called as I can see through debug points.

// 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 tell me where I am going wrong or is there any other approach with which I can achieve same functionality . Besides table is having resizable column so on increasing and decreasing width of table column , text should automatically gets ellipsed and un-ellipsed.

That's why I was thinking of achieving this through some css for firefox and safari browser

Thanks

Answer 1

text-overflow:ellipsis needs to be used in conjunction with white-space:nowrap;. Try adding this to your styles and it should work. You may also need to make your span a block element and give it a width

Example

Answer 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;
}

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