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({
        ...headerProps,
        styles: {
            root: {
                selectors: {
                    '.ms-DetailsHeader-cell': {
                        whiteSpace: 'normal',
                        textOverflow: 'clip',
                        lineHeight: 'normal',
                    },
                    '.ms-DetailsHeader-cellTitle': {
                        height: '100%',
                        alignItems: 'center',
                    },
                },
            },
        },
    })
}

<DetailsList
  ...
  onRenderDetailsHeader={onRenderDetailsHeader}
/>

Codepen working solution

Note:

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