Change text of cell depending on cell width

Question

I have a gantt-chart that I made in React. So it does not really matter what the code looks like. What I want to know if whether or not it is possible to abbreviate the month names depending on the width of the cell the month is in.

For example you have an smaller screen so December becomes Dec. and November becomes Nov. and this is the same for the others.

Is this possible todo with react at all?

Here is a snipper:

 <table className={style.div}>
                    <thead>
                        <tr>
                            <th colSpan="4" className={style.leftside}></th>
                            {this.state.globalDates.map(globalDate =>
                                <th colSpan={globalDate.colspan}>{globalDate.name}</th>
                            )}
                        </tr>
                        <tr className={style.equalDivide}>
                            <th colSpan="2"></th>
                            <th>Start Date</th>
                            <th>End Date</th>
                            {this.state.specificDates.map(date =>
                                <th >{date}</th> , <!---How can I change the content of this cell depending on the width of the cell--->
                            )}
                        </tr>

                        <tr>
                            <td className={style.divideLine} colspan={this.state.specificDates.length + 4}></td>
                        </tr>
                    </thead>

                    <tbody className={style.body}>
                        {this.state.projects.map(project =>
                            <Project
                                key={project.id}
                                project={project}
                                indent={0}
                                startdate={this.state.startdateFilter}
                                enddate={this.state.enddateFilter}
                                specificDates={this.state.specificDates}
                            />
                        )}
                    </tbody>
                </table>

Any help is very much appreciated.