当前位置: 首页 > news >正文

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; /* 垂直居中对齐 *

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


http://www.mrgr.cn/news/56796.html

相关文章:

  • Git第二章
  • Git绑定Gitee或Github以及Git面试常见题
  • 电商大数据获取渠道分享--官方接口、爬虫、第三方如何选择?
  • libvirt 基本命令行
  • 《重置MobaXterm密码并连接Linux虚拟机的完整操作指南》
  • 飞凌嵌入式FET527N-C核心板已适配OpenHarmony4.1
  • PVE虚拟机强制重启
  • ELK收集nginx日志
  • Stable Diffusion视频插件Ebsynth Utility安装方法
  • S32DS for ARM GPIO实践
  • 基于Spring Boot的论坛网站:从零到部署
  • TensorRT构建的engine文件用途
  • 自动化数据库管理:如何通过存储过程动态创建 MySQL 对象
  • 网盘与移动硬盘优势对比
  • 请求转发和重定向
  • 动态规划20:918. 环形子数组的最大和
  • 私募基金大屏粒子效果和动画闪烁效果 vue3+js
  • 4步教你绘制流程图,轻松提高工作效率!
  • PL/I语言的起源?有C语言,有B语言和A语言吗?为什么shell脚本最开始可能有#!/bin/bash字样?为什么不支持嵌套注释?
  • javascript实现sha256算法,支持分多次计算
  • 黑马javaWeb笔记重点备份11:Web请求与响应
  • 找剪辑中的BGM、音效,就上这8个网站
  • 想让服务端请求更高效?为什么说alova比axios更胜一筹?
  • C++11
  • 我与Linux的爱恋:进程程序替换
  • 人工智能岗位英语面试 - 如何确保模型的可靠性和性能