Не показывать ограниченные данные в таблице?

Question

как я могу ограничить данные, которые я получаю в столбце таблицы. Таким образом, после определенного символа в таблице отображается «транзакция ...».

Данные, которые я получил: Действия списка показывают до 15 символов в таблице. Покажите это как "..." после 15 символов.

Как я могу сделать это с реакцией?

Answer 1

В этом случае вы можете использовать свойство css text-overflow.

.long-cell {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<table>
<thead>
  <th>Col 1</th>
  <th>Col 2</th>
  <th>Col 3</th>
</thead>
<tbody>
  <tr>
    <td>Short text</td>
    <td>Short text</td>
    <td class="long-cell">Longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext</td>
  </tr>
  <tr>
    <td>Short text</td>
    <td>Short text</td>
    <td class="long-cell">Longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext</td>
  </tr>
  <tr>
    <td>Short text</td>
    <td>Short text</td>
    <td class="long-cell">Longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext</td>
  </tr>
</tbody>
</table>

Answer 2

Есть два способа добиться этого. Один с использованием JavaScript, а другой с использованием CSS

С использованием CSS: (Рекомендуемый способ)
Css имеет свойство под названием text-overflow: ellipsis;, это свойство обрезает текст для fixed-ширина HTML-элементы и добавляет ... в конце. Обязательно установите max-width и overflow: hidden

См. Во фрагменте ниже:

.text-overflow-test td {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<table class="text-overflow-test" border="1">
  <tbody>
    <tr>
      <td>This is short text</td>
      <td>This is short text</td>
    </tr>
    <tr>
      <td>This is very long long long very long long long very long long long text</td>
      <td>This is very long long long very long long long very long long long text</td>
    </tr>
  </tbody>
</table>

Использование Javascript:
Убедитесь, что длина больше 15. Отрежьте текст и добавьте ... в конце.

const data = [
	{text: "less than 15"},
	{text: "This text is a lot more than just 15 characters"},
	{text: "15   characters"},
]

const slicer = (text) => text.length > 15 ? text.slice(0,15) + '...' : text

const slicedData = data.map(obj => {
	return {
		text: slicer(obj.text)
	}
})

console.log(slicedData)

Способ javascript не рекомендуется, поскольку он изменяет фактические данные, которые вы передаете в таблицу, что приводит к потере информации.