Как я могу поместить длинный текст и изображение рядом друг с другом в тд в таблице?

Question

У меня есть этот код. У меня есть один тд, где слева ставится изображение с именем пользователя, а справа его имя. Проблема здесь в том, что если первое слишком длинное, то изображение, вставленное на рисунке, исчезла. Это нормально работает, если имя не более 10 символов

Как я могу решить эту проблему с css. Любые предложения, пожалуйста

 <div *ngIf="predictions.length" class="matches-tabs__content tab-content">
        <div class="match-lineups-container tab-pane fade show active" id="tab-1" role="tabpanel">
          <div class="table-responsive">
            <table class="matches-table lineups-table lineups-table--style-3 table table-striped table-dark">
              <tbody>
                <tr>
                  <th></th>           
                </tr>
                <tr *ngFor="let prediction of predictions; index as i;">

                  <td>
                    <a [routerLink]="['/user', prediction.created_by_user_id]">
                      <figure class="match-player team-1 figure" role="group">
                        <figure class="match-player__avatar">
                          <img src="assets/img/s\amples/match-player-01-60x60.png" alt="">
                        </figure>
                        <figcaption>
                          <span class="match-player__nickname">{{ prediction.created_by_user_alias }}</span>
                          <span class="match-player__name">{{ prediction.created_by_user_first_name + " " + prediction.created_by_user_last_name }}</span>
                        </figcaption>
                      </figure>
                    </a>
                  </td>

Answer 1

Если окончание имени символом «...» вместо того, чтобы показывать все это, является решением для вас, вы можете поместить текст между тегом «p» с классом «text-ellipsis», например так:

<span class="match-player__name"><p class="text-ellipsis">{{ prediction.created_by_user_first_name + " " + prediction.created_by_user_last_name }}</p></span>

И определить класс следующим образом:

.text-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}