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

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

相关推荐
三天不学习3 分钟前
Tailwind CSS 快速入门(2026 版):从 v4 零配置上手,到「该不该用、怎么用好」的选型实战
前端·css·tailwind
明月_清风10 分钟前
面对陌生的 GitHub 项目无从下手?这 4 个网站帮你快速读懂源码
前端·后端·github
htzyl20635 分钟前
前端阶梯——第九章、颜色、文本与背景
前端·css
zhangzeyuaaa1 小时前
Ruby `require` 完全指南:从 `$LOAD_PATH` 到 `require_relative`
服务器·前端·ruby
htzyl2061 小时前
前端阶梯——第八章、CSS入门与选择器
前端·css
猪猪拆迁队1 小时前
跨电脑复制共享-WebRTC 打洞踩坑
前端·后端·go
Amos_Web1 小时前
Rspack 源码解析(十八):Tree Shaking 如何用 SideEffects 重写模块连接
前端·rust·前端框架
百度一下吧1 小时前
前端包管理工具和使用手册
前端
anxiao_m2 小时前
水利数字孪生怎么选?主流可视化渲染平台深度横向测评
大数据·前端·人工智能·图形渲染·云渲染
kill5222 小时前
useRef
前端·javascript·react.js