React - как сделать внутреннюю Html внутри ссылки на реагирующий маршрутизатор, чтобы получить ширину родительского элемента

Question

У меня есть таблица, где ячейка является ссылкой. Я устанавливаю html как текст ссылки:

<TableCell align="left" classes={{root: classes.cellPadding}}>
  <Link className={classes.link} to="/">
    <HtmlFormattedText html={oppgave.oppgave_tekst}/>
  </Link>
</TableCell>

Компонент HtmlFormattedText выглядит следующим образом:

import React from 'react';
import PropTypes from 'prop-types';
import withStyles from "@material-ui/core/styles/withStyles";

const HtmlFormattedText = ({classes, html, ...rest}) => {
  return (
    <span {...rest} className={`${classes.formattedText} ${classes.root}`} dangerouslySetInnerHTML={{__html: html}}></span>
  );
};

HtmlFormattedText.propTypes = {
  html: PropTypes.string.isRequired
};

const styles = (theme) => ({
  formattedText: {
    '& p': {
      marginBlockStart: 0,
      marginBlockEnd: 0
    }
  },
  root: {
    maxWidth: 200
  }
});

export default withStyles(styles)(HtmlFormattedText);

Я пытаюсь установить htmlInnerText в иметь text-overflow: ellipsis, если текст слишком длинный. Я не уверен, как содержать html внутри ширины ячейки. Я уже установил max-width для TableCell и HtmlFormattedText. Но это все еще не работает. Ссылка на кодовый ящик здесь . Как я могу это исправить, чтобы длинный текст заканчивался многоточием?

Answer 1

text-overflow: ellipsis добавляет к тексту многоточие, поэтому его следует добавить к элементу, содержащему текст (в вашем случае, к тегу <p />).

Попробуйте добавить ниже css к вам <p/> тег. Многоточие должно работать.

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

Answer 2

просто добавьте ниже стили к элементу абзаца

formattedText: {
    "& p": {
      display: "block",
      textOverflow: "ellipsis",
      overflow: "hidden",

Рабочий пример ниже. https://codesandbox.io/s/material-demo-chehs