Make prolonged text suffix with ... under grid display

Question

Given the css

   .table {
      display: grid;
      grid-template-columns: 170px 170px;
      border: 1px solid black;
    }
    .tr {
      display: contents;
    }
    .td {
      display: flex;
      border-left: 1px solid black;
      border-rigth: 1px solid black;
    }
    div {
      display: inline-block;
    }

And JSX

import "./styles.css";

export default function App() {
  return (
    <div className="table">
      <div className="tr">
        <div className="td">
          abcsfsaffadsfsdfsafsdsfsadfdasdfasfasdffasfasfasdfsd
        </div>
        <div className="td">abcasfsdfasdfasdfasdfasdfasd</div>
      </div>
    </div>
  );
}

See Codesandbox

The text from left column overlaps the right.

Is there a way to make first column appears "..." at the end of prolonged text, so that it won't overlapped? Assume the line grid-template-columns: 170px 170px; can't be changed in css

Answer 1

A simple change is if you add the following to your CSS within div or .td.

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

Also remove.

      display: flex;