Как использовать многоточие в ячейке таблицы? - PullRequest
Новая
       61

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

0 голосов
/ 27 ноября 2018 
<div className="container">
  <div className="left-area">
    <div className="container2">
      <table>
        <tbody>
          <tr>
            <td>
              48148581581581858158158iffjafjadjfjafdjafdjfjadfjdjafdjafdjajdfjadfjdafjdajfajfdjaf
            </td>
            <td>1/1/0001</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Я хочу обрезать этот очень длинный текст. 

.container {
  margin-top: 20px;
  width: 90%;
  display: flex;
  .left-area {
    flex: 1 1 20%;
    .container2 {
      flex: 1 1 20%;
      table {
        width: 100%;
      }
    }
  }
}

Я пытался использовать этот CSS на td cell

  white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

1 Ответ

0 голосов
/ 27 ноября 2018

Отсутствует ключ table-layout: fixed. 

table {
  width: 100%;
  table-layout: fixed;
}

td {
  width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<table>
  <tbody>
    <tr>
      <td>
        48148581581581858158158iffjafjadjfjafdjafdjfjadfjdjafdjafdjajdfjadfjdafjdajfajfdjaf
      </td>
      <td>1/1/0001</td>
    </tr>
  </tbody>
</table>

При table-layout: auto (настройка по умолчанию) браузер использует алгоритм автоматической разметки, который проверяет размер содержимого, чтобы установить ширину ячеек (и,следовательно, столбцы).Свойства width и overflow в этом сценарии игнорируются, и многоточие не может работать.

С помощью table-layout: fixed вы можете определить ширину ячеек в первой строке (и, следовательно,установить ширину столбцов для таблицы).В этом случае соблюдаются свойства width и overflow, что позволяет работать функции многоточия.

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

...