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; /* 垂直居中对齐 *
也可调整,主要看页面具体样式