文本溢出及其在angular中失效的bug

最新推荐文章于 2023-12-04 14:00:01 发布

开水没有冬天

最新推荐文章于 2023-12-04 14:00:01 发布

阅读量262

点赞数

CC 4.0 BY-SA版权

分类专栏： css基础

本文链接：https://blog.csdn.net/weixin_42995876/article/details/100565498

css基础专栏收录该内容

18 篇文章

订阅专栏

单行文本溢出：

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

多行文本溢出：

.mui-ellipsis-2 {
    line-height: 24px;
    display: -webkit-box;
    overflow: hidden;
    white-space: normal !important;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

问题：

在angular（7.x）项目中，多行文本溢出没有生效，为什么？？？？
在display:flex;布局的时候，单行都没有生效。

参考：
https://blog.csdn.net/niesiyuan000/article/details/87929214
https://blog.csdn.net/xiaoqingpang/article/details/78952621

https://github.com/josephschmitt/Clamp.js
https://www.html.cn/archives/5206/

解决办法：多行在angular中失效的原因：
参考：
https://blog.csdn.net/Candy_home/article/details/79646655

默认编译的时候，会过滤 -webkit-box-orient: vertical;
改变方式，关闭 autoprefixer 然后再开启：用注释就可以做到，简直黑科技，eg：

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

尝试下这个指令：
Angular2~6 Text-Ellipsis 多行文本显示组件：
https://www.jianshu.com/p/e27060ccfd87