Bootstrap

css实现外层不换行,内层换行

css实现上图效果,内容A和B整体不换行,B内容中换行

<div className="description"> 
    <div className="label">{formatMessage({id: 'description'})}</Col>
    <divclassName="value">
        <div>{data.description || '123123'}</div>
    </div>
</div>
 

.description {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
}

.label {
    white-space: nowrap; /* 不换行 */
}

.value {
    overflow-wrap: break-word; /* 允许在单词边界换行 */
    word-wrap: break-word; /* 兼容旧版浏览器 */
    overflow: hidden; /* 隐藏超出部分 */
    max-width: 100%; /* 限制宽度 */
}

align-items: center; /* 垂直居中对齐 *

也可调整,主要看页面具体样式

;