css样式自动换行

.out {
    white-space: nowrap;
}
.inner {
    max-width: 200px;
    white-space: normal;
}

<div class="out">
    <div class="inner">
        水水水水水水水水display: inline-block; background-color: red;水水水水
    </div>
</div>

效果如下：

其中特殊的两点：

1. 外层有个强制不换行
2. 内层把它重新设置了