首页 前端知识 溢出文字显示省略号方法(多行有坑,记得避)

溢出文字显示省略号方法(多行有坑,记得避)

2024-06-03 12:06:01 前端知识 前端哥 245 358 我要收藏

1、单行文字溢出显示省略号

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

2、多行文字溢出显示省略号

   /* 多行溢出文字显示省略号五部曲 */
   overflow: hidden;
   text-overflow: ellipsis;
   /* 弹性伸缩盒子模型显示 */
   display: -webkit-box;
   /* 限制在一个块元素显示的文本的行数  3表示在第三行显示省略号*/
   -webkit-line-clamp: 3;
   /* 设置或检索伸缩盒对象的子元素的排列方式 */
   -webkit-box-orient: vertical;



overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

多行溢出,浏览器可以正常解析-webkit-box-orient: vertical;

但是编译后发现,页面上并没有显示...,打开F12发现,-webkit-box-orient: vertical;并没有解析出来,好了,遇到坑了,经过编译后就把-webkit-box-orient: vertical干掉了

然后找了两个结局方案:

1.可以解决,但是会在编译过程中报warning

/* autoprefixer: off*/
 -webkit-box-orient: vertical; 
/* autoprefixer: on*/

2.找到配置文件webpack.config.js文件,注释掉一下代码

new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap
        ? 
        :  
    }),

这个我不敢注释,毕竟是之前项目,咱们能不改就不改

3.好像行不通,但是别人说可以

/* autoprefixer: ignore next */
-webkit-box-orient: vertical;

4.css行内写法,可以搞定

  <span style={{ '-webkit-box-orient': 'vertical' }}>你好! </span>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10651.html
标签
评论
发布的文章

vue学习计划

2024-06-08 18:06:08

fastjson1.2.24-RCE漏洞复现

2024-06-08 09:06:33

JsonPath用法详解

2024-06-08 09:06:55

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!