Можно ли обернуть строки длинного имени заголовка в подробном списке структуры пользовательского интерфейса Office?

Следующие шаги в сообщении: Можно ли стилизовать заголовки столбцов Office Fabric DetailsList? < / а>. Мне удалось стилизовать заголовок, но некоторые заголовки очень длинные и усекаются.

Я пробовал использовать стиль wordWrap: 'break-word', но ничего не изменилось:

private renderCustomHeaderTooltip(tooltipHostProps: ITooltipHostProps): JSX.Element {
    return (
      <span
        style={{
          display: 'flex',
          fontWeight: 'bold',
          wordWrap: 'break-word'
        }}
      >
        {tooltipHostProps.children}
      </span>
    );
  }

Можно ли обернуть и отобразить полный заголовок в подробном списке Office-UI-fabric?


reactjs office-ui-fabric
person Nagabhushana G M    schedule 26.08.2019    source источник
comment
Вы пробовали flexWrap: wrap;? Кроме того, можете ли вы создать небольшую быструю демонстрацию на codeandbox.io? Это облегчит помощь.   -  person Saqib    schedule 26.08.2019
comment
Я пробовал flexWrap: wrap, тоже не сработало   -  person Nagabhushana G M    schedule 26.08.2019
comment
Пожалуйста, создайте демо и поделитесь ссылкой, я изучу ее.   -  person Saqib    schedule 26.08.2019
comment
developer.microsoft.com/en-us/fabric#/ элементы управления / web / detailslist /   -  person Nagabhushana G M    schedule 26.08.2019
comment
Его компонент office-fabric-ui в React, я разместил ссылку на detailList выше. Также создадим демо   -  person Nagabhushana G M    schedule 26.08.2019
comment
Я посмотрел на него, ожидая вашей демонстрации, поэтому я могу помочь вам в вашем текущем коде со всеми изменениями, которые вы уже добавили из другого поста.   -  person Saqib    schedule 26.08.2019

Ответы (1)


arrow_upward
1
arrow_downward

Ширину столбца можно настроить, указав свойства IColumn.minWidth и IColumn.maxWidth, например:

const columns = 
[
    {
      key: "thumbnail",
      name: "too long column name goes here... too long column name goes here... too long column name goes here... too long column name goes here... too long column name goes here...",
      fieldName: "thumbnail",
      minWidth: 1220,
      maxWidth: 1440,
    },
    ...
];

<DetailsList
    items={items}
    setKey="set"
    columns={columns}
    onRenderDetailsHeader={this.renderDetailsHeader}
  />

Результат

введите здесь описание изображения

person Vadim Gremyachev    schedule 29.08.2019