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; 核心的玩意就是这个。要使行内块元素文本 和后面的文本内容底部对齐。就可以了饿

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

相关推荐
烈风逍遥1 小时前
第七篇:提示词模板管理与 Agent 提示词编排
前端·人工智能·后端
Amos_Web1 小时前
Rspack 源码解析(十二):JavaScript Chunk 是如何被渲染出来的
前端·rust·源码
前端探险家Rick1 小时前
React Native 二级弹出面板 + 键盘适配:从踩坑到正确方案
前端
用户921080262861 小时前
MCP 是什么?用 Figma MCP 辅助还原 Vue 页面
前端
用户921080262861 小时前
用 Figma MCP 还原 Vue 页面时,我遇到的三个问题
前端
修罗王1 小时前
从 React Bits 到 Vue/Svelte Bits:重新定义前端“视觉表达层“
前端
kiros_wang1 小时前
Notification 本地通知:定时消息、点击路由跳转、桌面角标适配
前端
flash俊杰1 小时前
SQLite + sqlite-vec:100 篇文档内的私域知识库怎么做
前端
Hilaku2 小时前
为什么死磕 1px 的团队,用户体验反而更差?
前端·javascript·程序员