vue 超出三行隐藏_文字超出三行省略...显示全文

1、在开发过程中,我们经常会用到这种超出三行显示...的要求,使用css属性是可以的,但是需要考虑兼容性问题

实现单行文本的溢出显示省略号,我们应该都知道用text-overflow:ellipsis属性,同时注意加width来兼容部分浏览器;

.textOVerFlow {

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis

}

实现三行在此基础上扩展:

.textOVerThree {

display:-webkit-box;

overflow: hidden;

white-space: normal !important;

text-overflow: ellipsis;

word-wrap: break-word;-webkit-line-clamp: 3;-webkit-box-orient: vertical

}

因为使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;

2、此处延伸 ,超出三行显示展示全文,如果使用以上属性我们可以发现,实际上dom里面的文字没有改变,只是视觉上有...,实现超出三行显示全文,分为两步:

(1)、是否满足三行

(2)、是否出现了省略号...  或者说是否超过了三行

那麽对应的解决方案:

(1)行数我们可以通过 使用 line-height*num 与 dom的高度进行比较,但是无法判读是否三行全部占满,

(2)因为上面属性是实际文本内容并没有改变,所以说,我们可以获取到实际dom的高度,scrollHeight,与 我们需要的高度进行比较即可;

setCheckAll('.p_14', 3, '查看全文', 'text_blue');

/*设置必须有line-height 超过多少行显示文字查看全文*/

function setCheckAll(select, num, text, name) { //num 代表行数 text为添加显示的文字,

var height = $(select).height(),

realityHeight = $(select).get(0).scrollHeight;

lineHeight = $(select).css('line-height');

lineHeight = lineHeight.split('px')[0];

if(height + 1 >= lineHeight * num && realityHeight >= lineHeight * num) {

$(select).after('

' + text + ' >

');

};

//lineHeight * num 是几行的高度,只要 实际的高度超过了设定的这个高度,就可以认为是超出了 num 行

}

以上有什么问题欢迎指出,蟹蟹!

菜菜叨逼叨

在本次需求中,也算是一个小学习吧,本来是想通过判断文字的字数来控制“查看全文”的展示与否,这种方法实现太过复杂,需要考虑不同屏幕的尺寸,文字中的特殊字符,包括可能存在的
;跟产品的谈判又失败了,在设计上一点小的调整,可以降低开发的时间与难度,但是需求方一再不肯退步,手动狗头。如果在时间充足的条件下,可以考虑实现难点,如果时间紧迫,建议还是先找一种易实现的设计形式;不然只能两败俱伤啊~~~~~~~~~~~~~

转载请注明出处,虽然我是一只小菜鸡~

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在这个问题中,引用\[1\]提供了一个在JavaScript文件中使用的代码示例,其中使用了`process.env.VUE_APP_BASE_API`作为`baseURL`的值。这个值是从环境变量中获取的。引用\[2\]提供了一个使用`computed`属性的Vue组件示例,其中使用了`process.env.VUE_APP_BASE_API`作为`href`属性的值。引用\[3\]提到了`process.env`对象中的属性必须以`VUE_APP`开头,否则该属性值不会存在。 综上所述,`baseURL: process.env.VUE_APP_BASE_API`是一个在JavaScript文件中使用的代码片段,它使用了环境变量中的`VUE_APP_BASE_API`作为`baseURL`的值。这个值可以通过在Vue组件中使用`computed`属性来获取,并且在`process.env`对象中的属性必须以`VUE_APP`开头。 #### 引用[.reference_title] - *1* *2* [使用变量process.env.VUE_APP_BASE_API](https://blog.csdn.net/weixin_40030173/article/details/114669986)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [vue .env文件配置使用](https://blog.csdn.net/qq_41538097/article/details/117355115)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值