如何设置CSS使长单词不从中间拆分，保证完整单词在同一行显示

样式调整方案 #

你只需要修改.ineligible-reason-container和内部p标签的CSS规则即可，修改后的完整样式如下：

.ineligible-reason-container {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    /* 可选：调整图标和文本的间距 */
    gap: 6px;
    p {
        /* 删掉原来的display: flex、align-items: center规则 */
        flex: 1;
        margin: 0;
        word-break: normal;
        overflow-wrap: break-word;
        hyphens: manual;
    }
}

规则说明 #

• 给p标签添加flex: 1：让文本容器占满flex容器除警告图标外的所有剩余宽度，避免宽度计算异常导致换行规则失效
• word-break: normal：遵循浏览器默认的英文换行规则，只会在单词间隙、标点等合法断点处换行，不会随意拆分完整单词
• overflow-wrap: break-word：兜底兼容规则，只有当出现单个长度超过容器宽度的超长字符串时，才会拆分该字符串避免内容溢出，普通长度的单词不会被拆分
• hyphens: manual：禁用浏览器自动添加连字符拆分单词的行为，避免单词被自动加连字符拆为两行

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