当前位置: 首页 > 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.lryc.cn/news/467266.html

相关文章:

  • word取消自动单词首字母大写
  • flex常用固定搭配
  • Kafka、Kafka Streams、Drools、Redis 和分布式数据库的风控系统程序
  • C++在实际项目中的应用第一课:游戏开发中的C++
  • 一键下载海外youtbe视频 解锁版 支持多分辨率
  • Scala内部类的运用
  • 【在Linux世界中追寻伟大的One Piece】Socket编程UDP
  • 机器学习在聚合物及其复合材料中的应用与实践
  • 用大模型或者预训练模型对图片进行OCR
  • 如何使用的是github提供的Azure OpenAI服务
  • elementUI进度条el-progress不显示白色
  • 学习笔记——路由——IP组播-PIM(协议无关组播)-概述/PIM模式
  • TCP 协议学习
  • python3的基本数据类型:String(字符串)
  • 面试总结(2024/10/16)
  • 从图像识别到聊天机器人:Facebook AI的多领域应用
  • linux中级(NFS服务器)
  • 微软主动出击,“钓”出网络钓鱼者
  • Xcode16 编译运行YYCache iOS18 sqlite3_finalize 闪退问题解决方案
  • Kafka-Windows搭建全流程(环境,安装包,编译,消费案例,远程连接,服务自启,可视化工具)
  • django模板相关配置
  • MongoDB等保限制下的连接认证问题
  • 2024 睿抗机器人开发者大赛(RAICOM)-【网络安全】CTF 部分WP
  • idea 无法输入中文 快速解决
  • 掌握ElasticSearch(五):查询和过滤器
  • 自学[vue+SpringCloud]-012-SpringCloud工程发送邮件
  • STM32通信协议-I2C
  • 廉颇老矣尚能饭否,实践甘肃数据挖掘挑战赛作物与杂草的智能识别,基于YOLOv3全系列【tiny/l/spp】参数模型开发构建田间低头作物杂草智能化检测识别模型
  • 基于Django+Python的宾馆管理系统设计与实现
  • MySQL--mysql的安装