does a detailslist header text wrap in a fluent ui?

Most of FluentUI Components uses text-overflow: ellipsis. What you can do is to modify that “rule”. Inside DetailsList you have onRenderDetailsHeader method which allows you to change header styles.

const onRenderDetailsHeader = (headerProps, defaultRender) => {
    if (!headerProps || !defaultRender) {
        //technically these may be undefined...
        return null;
    return defaultRender({
        styles: {
            root: {
                selectors: {
                    '.ms-DetailsHeader-cell': {
                        whiteSpace: 'normal',
                        textOverflow: 'clip',
                        lineHeight: 'normal',
                    '.ms-DetailsHeader-cellTitle': {
                        height: '100%',
                        alignItems: 'center',


Codepen working solution


Play around with minWidth, maxWidth props inside this._columns to get expected behavior.

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top