JavaScript实现多行文本溢出
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
背景:UED给的设计稿要求。需要实现多行文本溢出省略号的样式。
原以为是一个简单的小需求, 框框直接上手。代码如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | < template > < div class = "name-wrap" > < span class = "tag bd" > 我是标签 </ span >hhhhhhhhhhhhhhhhhhhh </ div > </ template > < style > .tag { dispaly: inline-block; } .name-wrap { word-break: break-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } </ style > |
一切看起来都是嘎嘎完美,虽然我知道这么写是有兼容问题的,但这个不是我这次关注的点。重点在于,我还有一个标签,在大部分手机下都能实现我想要的样式。但是在高版本的ios(iphone14、iphone15)下,他会默认成单行文本溢出省略号
。我了解到原因是-webkit-line-clamp
属性的工作原则需要其容器是块级元素或至少表现得像一个块级元素。 所以我猜测,有没有可能在高版本的ios中,这个属性实现方式有所调整。
由于我需要的样式是类似文字环绕的效果,所以我无法直接给标签外的文字添加一个span
标签来改变html
结构。需要加上浮动效果才行。
总结就是我太菜了,所以我改用了一种比较原始的方法。用js去实现多行文本溢出省略+浮动去实现我想要的效果. 因此记录一下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | < div class = "name-wrap" > < span class = "tag bd" > 我是标签 </ span > < span class = "text-ellipsis" :ref = "setItemRef" >hhhhhhhhhhhhhhhhhhhh</ span > </ div > < script lang = "ts" > export default defineComponent({ props: { show: Boolean, }, setup(props, ctx) { let showPopup = computed({ get: () => props.show, set: (val: boolean) => ctx.emit("update:show", val), }); const textElements = ref< HTMLElement []>([]); const setItemRef = (el: any) => { if (el) { textElements.value.push(el); } }; const applyEllipsis = (element: HTMLElement, maxLines: number) => { let text = element.innerHTML; const lineHeight = parseInt(window.getComputedStyle(element).lineHeight); const maxHeight = lineHeight * maxLines; // 不断减少文本直到其高度小于或等于最大允许高度 while (element.scrollHeight > maxHeight) { text = text.slice(0, -1); element.innerHTML = text + '...'; } } watch(() => showPopup.value, (val: boolean) => { if (val) { requestAnimationFrame(async () => { await nextTick(); // 确保 DOM 已更新 textElements.value.forEach((element) => { applyEllipsis(element, 2); }); }); } }) return { showPopup, setItemRef, } }, }); </ script > < style > .name-wrap { font-size: 14px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #101112; line-height: 20px; flex: 1; } .tag { float: left; } .text-ellipsis { display: block; word-break: break-all; } </ style > |
到此这篇关于JavaScript实现多行文本溢出的文章就介绍到这了,更多相关JavaScript多行文本溢出内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
这篇文章主要介绍了使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享,编写半透明遮罩层时要注意定位问题、不要满屏遮罩,需要的朋友可以参考下2016-05-05
最新评论