Vue项目关于省略号显示

最新推荐文章于 2024-08-27 17:03:53 发布

原创最新推荐文章于 2024-08-27 17:03:53 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #css

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了在Vue项目中实现省略号显示时遇到的Webpack编译问题，包括如何处理-webkit-box-orient: vertical被移除的情况。推荐的解决方案是b计划，并提供了在webpack配置中解决 autoprefixer 移除样式的办法，同时提到了不走寻常路的c计划——内联样式。此外，还讨论了webpack编译后可能导致CSS样式不生效的解决策略，如注释相关代码、调整minimize选项以及使用 scoped 的style。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

省略号显示

{
	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