многоточие и отображение многострочного текста в одну строку

У меня есть один файл 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 скажите мне, где я ошибаюсь, или есть какой-либо другой подход, с которым я могу достичь такой же функциональности. Кроме того, таблица имеет изменяемый размер столбца, так что при увеличении и уменьшении ширины столбца таблицы текст должен автоматически получить эллипс и не эллипс.

Вот почему я думал о достижении этого через некоторый css для браузера Firefox и Safari

благодаря