React组件ward_caption文本溢出，设置overflow:hidden无效如何解决？

问题原因 #

overflow: hidden 未生效的核心原因是flex布局下的子项默认最小宽度为auto，会根据内容自动撑开容器，且你未限制文本的换行规则，无法触发溢出裁剪逻辑。

解决方案 #

修改ward_no.css中的.ward_caption样式，补充缺失的规则即可：

.ward_caption {
    flex: 1;
    font-size: 30px;
    overflow: hidden; /* 取消注释开启溢出裁剪 */
    white-space: nowrap; /* 强制文本不换行 */
    text-overflow: ellipsis; /* 溢出时显示省略号，不需要可以删掉这行 */
    min-width: 0; /* 覆盖flex项默认的min-width: auto规则，允许容器被压缩 */
    font-weight: bold;
    font-family: Georgia, 'Times New Roman', Times, serif;
    margin-right: 20px;
    align-self: center; /* 可选，让标注和右侧输入框垂直居中对齐 */
}

如果后续右侧下拉框内的选中ward号也出现溢出问题，给.ward_box也加上上述overflow: hidden、white-space: nowrap、text-overflow: ellipsis、min-width:0规则即可。

内容的提问来源于stack exchange，提问作者coolhack7