css 如何让元素内部文本和外部文本 一块显示省略号

实际上还是有这样的需求的

html 复制代码
<div class="container">
        <span>
           啊啊啊啊啊啊啊啊
        </span>
        你好啊撒撒啊撒撒撒撒啊撒撒撒撒撒说
    </div>

还是有这样的需求的哦。

css 复制代码
div.container {
            width: 200px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            display: inline-block;
        }
        div > span {
            display: inline-block;
            max-width: 100px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            vertical-align: middle;
        }

vertical-align: middle; 核心的玩意就是这个。要使行内块元素文本 和后面的文本内容底部对齐。就可以了饿

关注我持续更新前端知识。

相关推荐
玉宇夕落几秒前
原子化编程”:Tailwind CSS 核心原理
前端
是小李呀5 分钟前
解决“Error: The project seems to require yarn but it‘s not installed”报错
前端
weedsfly6 分钟前
一个电商价格计算案例,带你学会前端开发中的责任链模式
前端·javascript·面试
__sjfzllv___7 分钟前
在职前端Leader学习/转行 AI Agent -DAY10
前端
沉迷学习日益消瘦11 分钟前
8 UI 组件库与设计系统:Token 驱动 + 暗色模式 + 4 种主题色
前端
CodeSheep26 分钟前
有这4个迹象,你就该离职了!
前端·后端·程序员
用户0595401744626 分钟前
把大模型记忆回归测试从手工检查换成 Playwright+VCR,误判率从 40% 降到 0
前端·css
倾颜28 分钟前
pnpm 负责依赖,Turbo 负责任务:一次小型 Monorepo 治理的边界取舍
前端·next.js
程序员爱钓鱼28 分钟前
Rust 元组 Tuple 详解:组合不同类型的数据
前端·后端·rust
IT_陈寒32 分钟前
React的useEffect为什么经常执行两次?
前端·人工智能·后端