Усеченный пролёт внутри тд - PullRequest
Новая
       16

Усеченный пролёт внутри тд

0 голосов
/ 29 мая 2019

Я использую классы Materialise, чтобы создать для пользователя "заполнитель фотографий", который содержит первую букву его имени.

У меня проблемы с длинными именами внутри тега <td>.Я не хочу, чтобы название ломалось, когда оно слишком длинное.Из-за этого я попытался применить class="truncate" к спаму, содержащему имя, но его не удалось усечь.

Как мне решить эту проблему? 

main {
  padding: 16px;
}

table {
  table-layout: fixed;
}

td {
  width: 33.33%;
}

.photo-placeholder {
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  background-color: crimson;
  color: white;
}

.truncate {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<main>

  <table id="table1" class="white z-depth-1 centered">
    <thead>
      <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="Col 1">
          <span class="photo-placeholder">P</span>
          <span class="truncate">Pedro Luis Arend Gonçalves</span>
        </td>
        <td data-label="Col 2">Info 2</td>
        <td data-label="Col 3">Info 3</td>
      </tr>
    </tbody>
  </table>

</main>

JSFiddle

Ожидаемый результат:

enter image description here

Ответы [ 3 ]

1 голос
/ 29 мая 2019

Кажется, что класс "truncate" устанавливает элемент в display:block, что помещает его в собственную строку.

Одним из решений может быть его установка на display:inline-block и установка его ширины на оставшееся место в ячейке таблицы. Ниже я рассчитал соответствующую ширину с помощью calc(). Я также удалил пробел между двумя <span> элементами, чтобы он не увеличил ширину. 

main {
  padding: 16px;
}

table {
  table-layout: fixed;
}

td {
  width: 33.33%;
}

.photo-placeholder {
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  background-color: crimson;
  color: white;
}

#table1 .truncate {
  display: inline-block;
  width: calc(100% - 40px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<main>

  <table id="table1" class="white z-depth-1 centered">
    <thead>
      <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="Col 1">
          <span class="photo-placeholder">P
          </span><span class="truncate">Pedro Luis Arend Gonçalves</span>
        </td>
        <td data-label="Col 2">Info 2</td>
        <td data-label="Col 3">Info 3</td>
      </tr>
    </tbody>
  </table>

</main>

Чтобы избежать необходимости расчета ширины, вы можете просто float заполнитель слева, например: 

main {
  padding: 16px;
}

table {
  table-layout: fixed;
}

td {
  width: 33.33%;
}

.photo-placeholder {
  float: left;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  text-align: center;
  background-color: crimson;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<main>

  <table id="table1" class="white z-depth-1 centered">
    <thead>
      <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="Col 1">
          <span class="photo-placeholder">P</span>
          <span class="truncate">Pedro Luis Arend Gonçalves</span>
        </td>
        <td data-label="Col 2">Info 2</td>
        <td data-label="Col 3">Info 3</td>
      </tr>
    </tbody>
  </table>

</main>

Вот другой метод, использующий контейнер flexbox . Мне нравится этот, потому что легче центрировать два элемента по вертикали с помощью align-items:center. 

main {
  padding: 16px;
}

table {
  table-layout: fixed;
}

td {
  width: 33.33%;
}

.photoContent {
  display: flex;
  align-items: center;
}

.photo-placeholder {
  flex: 0 0 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  text-align: center;
  background-color: crimson;
  color: white;
  margin: 0 0.5em 0 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<main>

  <table id="table1" class="white z-depth-1 centered">
    <thead>
      <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="Col 1">
          <div class="photoContent">
            <span class="photo-placeholder">P</span>
            <span class="truncate">Pedro Luis Arend Gonçalves</span>
          </div>
        </td>
        <td data-label="Col 2">Info 2</td>
        <td data-label="Col 3">Info 3</td>
      </tr>
    </tbody>
  </table>

</main>
0 голосов
/ 29 мая 2019

Fiddle Попробуйте добавить следующий CSS: 

.photo-placeholder {
  margin: 10px;
  min-width: 40px;
}

table.centered tbody tr td:first-child {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}
0 голосов
/ 29 мая 2019

Убедитесь, что для элемента также установлено правило стиля width или max-width. В противном случае, пока есть место для роста, оно будет занимать это пространство. Добавление правила стиля max-width: 50px; помогло мне в вашем примере.

...