省略号显示

{overflow: hidden;  // 超出的文本隐藏text-overflow: ellipsis; // 溢出用省略号显示white-space: nowrap; // 溢出不换行display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。-webkit-line-clamp: 2; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。-webkit-box-orient: vertical;  // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
}

注意点： webpack编译会干掉 -webkit-box-orient: vertical
解决方案：
a计划（会报waring）：

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

b计划（推荐）：

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

补充：如a计划与b计划仍无法解决问题，则注意在webpack.prod.conf.js中自行配置autoprefixer: {remove: false}

new OptimizeCSSPlugin({cssProcessorOptions: config.build.productionSourceMap? { safe: true,autoprefixer: {remove: false}, map: { inline: false } }: { safe: true,autoprefixer: {remove: false} }
}),

c计划（不走寻常路）：将-webkit-box-orient: vertical样式直接内联在HTML标签内

衍生知识：
webpack编译后部分css样式不生效
1.注释掉webpack.prod.config.js代码（此插件的作用是为了消除来自不同组件之间可能重复的css）

new OptimizeCSSPlugin({cssProcessorOptions: config.build.productionSourceMap? { safe: true,map: { inline: false } }: { safe: true,autoprefixer: {remove: false} }
}),

2.在utils.js中添加minimize:true

const cssLoader = {loader: 'css-loader',options: {sourceMap: options.sourceMap,minimize:true
}

3.vue组件style使用scoped

Vue项目关于省略号显示相关推荐

vue入门（一）搭建vue项目，基础显示，指令
之前接触过vue,但是一直不是十分清晰,学的云里雾里,最近打算再次系统的整理一下,重新入门.还是根据vue官方文档一步一步的来,但是是属于简化的那种,会把我的学习过程都记录下来. 下一篇:vue入门( ...
解决VScode创建Vue项目时一直显示downloading template的问题
问题描述: 本人小白菜在使用VScode创建Vue项目时,界面一直出现downloading template,最后创建失败,查了诸多原因,最后终于通过改变网络连接解决了问题解决方案: 之前连接的是 ...
vue项目json格式化显示
1.在项目开发中遇到json数据展示 2.利用函数进行json格式化 transitionJsonToString(jsonObj, callback) {// 转换后的jsonObj受体对象var ...
vue项目每次打开显示的端口号都不一样
原因:portfinder新发布的版本异常解决方法: npm install portfinder@1.0.21
vue项目对要显示的富文本数据中的图片处理----去掉或控制图片大小
一.去掉图片标签 let informationArticle = informationArticle.replace(/<\/?(img)[^>]*>/gi, ''); 利用正则 ...
Vue文本内容超出显示省略号，超出显示tooltip提示
项目中固定宽度的容器文本超出显示省略号,超出部分显示tooltip场景很常见,所以自己就着手写了一个过滤器用于判断文本是否超出. 代码中有用到Element-UI的组件,还有会提示在Table组件中和 ...
Vue文本内容超出显示省略号，超出显示tooltip提示2.0
项目中固定宽度的容器文本超出显示省略号,超出部分显示tooltip场景很常见,所以自己就着手写了一个过滤器用于判断文本是否超出. 我用两种方式满足了需求,这是其中一种,想看另一种可以查看Vue文本内容 ...
vue项目在IE中显示空白，报错：vuex requires a Promise polyfill in this browser
问题描述 vue项目在非IE内核的浏览器中显示正常,在IE内核浏览器中报错,并显示空白.报错如下: SCRIPT5022: [vuex] vuex requires a Promise polyfi ...
《vue+vant 文本超出两行部分省略号显示》
今天做移动端项目,遇到了这个问题面向百度后总结得到了这个结果. 首先,我们要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis ...

Vue项目关于省略号显示

省略号显示

Vue项目关于省略号显示相关推荐

最新文章

热门文章