Как предотвратить рост столбца в сетке, если в него динамически добавляется элемент?

У меня сетка с несколькими столбцами. Каждый столбец содержит заголовок с заголовком. При наведении курсора к заголовку добавляется кнопка для редактирования заголовка. Это привело к росту колонны.

При наведении указателя мыши я хочу сохранить ту же ширину столбца, добавить кнопку и поставить многоточие в заголовке, если последний слишком длинный для правильного добавления кнопки.

Мне уже удалось реализовать это поведение, когда столбцы не находятся в сетке или гибком макете.

Как реализовать это поведение в шаблоне сетки? Столбцы всегда должны занимать 1/3 доступного пространства, поэтому я не могу указать ширину.

Вот код и песочница:

// Header
const Root = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: orange;
  padding: 0 12px;
`;

const Title = styled.h1`
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  margin-right: 12px;
`;

export default function Header({ title }) {
  const [edit, setEdit] = useState(false);
  return (
    <Root onMouseOver={() => setEdit(true)} onMouseLeave={() => setEdit(false)}>
      <Title>{title}</Title>
      {edit && <button>edit</button>}
    </Root>
  );
}

// Grid

const Grid = styled.div`
  display: grid;
  grid-template-columns: repeat(3, 1fr);
`;

const Col = styled.div`
  margin: 12px;
  padding: 24px;
`;

export default function App() {
  return (
    <>
      <h1>GRID (not ok)</h1>
      <Grid>
        <Col>
          <Header title="Col 1 long title" />
        </Col>
        <Col>
          <Header title="Col 2" />
        </Col>
        <Col>
          <Header title="Col 3" />
        </Col>
      </Grid>
      <h1>NO GRID (OK)</h1>
      <div>
        <Col>
          <Header title="Col 1 long title" />
        </Col>
        <Col>
          <Header title="Col 2" />
        </Col>
        <Col>
          <Header title="Col 3" />
        </Col>
      </div>
    </>
  );
}

песочница: https://codesandbox.io/s/dynamic-text-ellipsis-78vbw?file=/src/App.tsx:72-800

Спасибо за вашу помощь!


reactjs javascript css ellipsis
person DoneDeal0    schedule 03.02.2021    source источник

Ответы (1)


arrow_upward

arrow_downward

person    schedule
comment
Привет @Serj! Это не любимое решение, потому что оно означало бы выполнение раннего многоточия в заголовке, у которого есть достаточно места для отображения. Это странно с точки зрения пользовательского интерфейса. - person DoneDeal0; 03.02.2021
comment
Привет @Serj. Вы должны предварять свой ответ кратким объяснением того, что это делает, а также почему, по вашему мнению, эту проблему следует решать именно так. - person Coreus; 03.02.2021