Truncate a line of text where it breaks naturally, so table column widths don't explode.

TruncateTextAtBreak.jsx

import React from 'react';
import styled from 'styled-components';

const Relative = styled.div`
  position: relative;
`;

const TextWidth = styled.div`
  opacity: 0;
  text-overflow: clip;
  height: 1px;
`;

const TextHeight = styled.div`
  opacity: 0;
  text-overflow: clip;
  white-space: nowrap;
  width: 1px;
`;

const Text = styled.div`
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
`;

export const TruncateTextAtBreak = props => (
  <Relative>
    <TextWidth {...props} />
    <TextHeight {...props} />
    <Text {...props} />
  </Relative>
);