vue css 多行打点展示

css样式

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

生产打包问题

• 原因：css的这个-webkit-box-orient属性在打包的时候会丢失
• 解决方案如下

<template lang="pug">
	.sub-notice(:style="lineStyle") {{notice.desc}}
</template>
<script>
  export default {
    computed: {
      lineStyle() {
        return {'-webkit-box-orient': 'vertical'}
      }
    }
  }
</script>
<style scoped lang="stylus">
	.sub-notice
		-webkit-line-clamp 3
	    overflow hidden
	    display -webkit-box
</style>

效果图