Changing list column width with Script Editor doesn't break line

Question

I have a webpart that has a list with columns.

To change the width of these columns I inserted a Script Editor and used this code:

<style>
.ms-vh-div[displayname='Beschreibung'] {
width: 450px;
}
.ms-vh-div[displayname='Standort'] {
width: 200px;
}
.ms-vh-div[displayname='MaxAnzahlTeilnehmer'] {
width: 100px;
}
</style>

The problem ist that the width of the column "Standort" can't be reduced more. I want the content of that column to get to the next line, so that I can change the width.

See:

Answer 1

You could try below nth:child to apply the CSS.

My test demo:

<style type="text/css">
        table.ms-listviewtable tr th:nth-child(4) {
            display: block;
            width: 160px !important;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        table.ms-listviewtable tr td:nth-child(4) {
            display: block;
            width: 160px !important;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
    </style>