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

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

相关推荐
ZoeLandia4 分钟前
React05:useEffect 与副作用
开发语言·前端·react.js·typescript
狮子座的男孩11 分钟前
html+css基础:24、2D变换(位移/缩放/旋转/扭曲(了解)/多重变换/变换原点)
前端·css·经验分享·html·2d位移·原点变换·缩放/旋转/扭曲
weixin_4173968320 分钟前
酒店弱电怎么验收?四个阶段与逐项检查清单
开发语言·前端·php·综合布线·弱电
风骏时光牛马20 分钟前
探索AI开源工具,解锁原生创造新体验
前端
u01110267523 分钟前
Vue 页面离开后还在轮询?统一清理计时器、监听器与观察器
前端·javascript·vue.js
大猩猩X26 分钟前
vue 表格组件 vxe-table 实现多行编辑,支持增删改查与校验
前端·javascript·vue.js·vxe-table
跨境数据猎手2 小时前
跨境电商系统三大 Web 漏洞的防护:SQL 注入、XSS、CSRF
前端·sql·xss
冒险的豆子2 小时前
Proxy & Vue 响应式(合并精简版,适合面试)
前端·javascript·vue.js
Java后端的Ai之路3 小时前
前端技术Vue-18-视图中的渲染
前端·javascript·vue.js
程序员海军9 小时前
用了两年多 GPT,我最近开始换模型了,还折腾了个求职避坑 Agent
前端·人工智能·后端