JSFiddle - React, Tailwind, and code Playground

account truncation test

by Travis Almand

HTML

<p>Resize window to force truncation. By default account name will truncate against account number. Click button to toggle forcing account number to wrap to second line. Account name will then truncate at right edge of account container.</p>

<button id="toggle">click me</button>

<div class="account">
  <div class="account-row">
    <div class="account-name">account name</div>
    <div class="account-number">account number</div>
  </div>
  <div class="account-row">
    <div class="account-balance">$999,999,999.99</div>
  </div>
</div>

<div class="account">
  <div class="account-row">
    <div class="account-name">really really really really long account name</div>
    <div class="account-number">account number</div>
  </div>
  <div class="account-row">
    <div class="account-balance">$999,999,999.99</div>
  </div>
</div>

<div class="account">
  <div class="account-row">
    <div class="account-name">really really really really long account name</div>
    <div class="account-number">bigger account number</div>
  </div>
  <div class="account-row">
    <div class="account-balance">$999,999,999.99</div>
  </div>
</div>

<div class="account">
  <div class="account-row">
    <div class="account-name">account name</div>
    <div class="account-number">account number</div>
  </div>
  <div class="account-row">
    <div class="account-balance">$999,999,999.99</div>
  </div>
</div>

<div class="account">
  <div class="account-row">
    <div class="account-name">really long account name</div>
    <div class="account-number">acct number</div>
  </div>
  <div class="account-row">
    <div class="account-balance">$999,999,999.99</div>
  </div>
</div>

<div class="account">
  <div class="account-row">
    <div class="account-name">really long account name</div>
    <div class="account-number">account number</div>
  </div>
  <div class="account-row">
    <div class="account-balance">$999,999,999.99</div>
  </div>
</div>

<div class="account">
  <div class="account-row">
   ...

SCSS

.account {
  border: 1px solid gainsboro;
  margin: 16px 0;
  
  .account-row {
    align-items: center;
    display: flex;
  }
  .account-name {
    flex-grow: 1;
    font-size: 24px;
    overflow: hidden;
    padding: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .account-number {
    font-size: 16px;
    padding: 8px;
    white-space: nowrap;
  }
  .account-balance {
    font-size: 24px;
    padding: 8px;
  }
}

.fancy {
  .account-row {
    flex-wrap: wrap;
  }
}

JavaScript

document.querySelector('#toggle').addEventListener('click', function (e) {
	document.querySelectorAll('.account').forEach(account => {
  	account.classList.toggle('fancy');
  });
});