Flex布局和省略号

css 复制代码
.ellipsis-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
css 复制代码
// 省略一行
.content {
    display: flex;
    width: 100%;
    & > span {
      .ellipsis-text();
      flex: auto;
      width: 0;
    }
  }
css 复制代码
// 省略两行
.title {
    display: flex;
    width: 100%;
    & > span {
      .ellipsis-text();
      flex: auto;
      width: 0;
      white-space: normal;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

通常情况下,省略号是和固定宽度width:xx一起使用的,但是会有这样的需求:

  • 子元素的宽度根据浏览器的宽度自适应
  • 但是如果子元素内容超过容器可容纳的宽度,则显示为省略号

现在的问题是:

  • 如果使用固定宽度,无法实现宽度自适应
  • 如果使用flex-auto,无法显示未省略号

解决办法:

随便设置一个width值

  1. 因为width是和省略号样式配套使用的
  2. 为什么随便设置一个widht值都可以生效,因为这里的div/p/span元素宽度需要自适应,所以设置了flex:auto,这时元素的宽度相当于是auto,那么width设置什么值都会被忽略,仅仅是为了配合省略号的样式生效而已
相关推荐
溜达哥2 分钟前
git commit 执行报错 sh: -/: invalid option
前端·javascript·git
江梦寻16 分钟前
最新Chrome与Selenium完美兼容指南(含驱动下载与配置)
前端·chrome·selenium·测试工具·edge·edge浏览器
Menior_21 分钟前
进程地址空间(比特课总结)
前端·chrome
kymjs张涛1 小时前
前沿技术周刊 2025-06-09
android·前端·ios
前端康师傅1 小时前
JavaScript 变量详解
前端·javascript
Sun_light1 小时前
队列:先进先出的线性数据结构及其应用
前端·javascript·算法
Data_Adventure1 小时前
如何在本地测试自己开发的 npm 包
前端·vue.js·svg
萌萌哒草头将军1 小时前
⚓️ Oxlint 1.0 版本发布,比 ESLint 快50 到 100 倍!🚀🚀🚀
前端·javascript·vue.js
ak啊1 小时前
WebGL入门教程:实现场景中相机的视角与位置移动
前端·webgl
天天打码1 小时前
Sass具有超能力的CSS预处理器
前端·css·sass