文字溢出省略和用户体验优化

2024-04-11 06:03:44

这是我又一次探究文字溢出相关问题，也是我在用户体验道路上踏出的又一小步。

之前提到“文字溢出”瞬间就能想到 ellipsis。再接触的多了一点会同时想到 display: -webkit-box;（多行溢出）。
你一定欣喜若狂，认为掌握了“宇宙之玄妙”，拥有了“制胜之法宝”。但是如果你就此而去，你仍会时不时的发出疑问：“为什么我的溢出省略没有生效？”

先说，目前已知的所有相关问题最终都可以归结为一个点上：行内样式与块级样式。
包括一个很可惜的、似乎还没有文章给出具体说明的一个问题 —— flex！

flex与行内元素

你可能会疑惑，那是因为你只停留在“用”的阶段。
事实上，早在某一篇文章中笔者就发表过观点：flex会将元素变为既具有行内某些特点又具有行内块部分特性的样式结构。这一点很关键 —— 可以结合position等属性做出意想不到的效果。

笔者后面写过很多“详解”，但再看下来竟都不如这个当初随手画下的说明更清晰。按图中说明稍加思考或实践一下你也会恍然大悟。

flex与文字溢出

在我司的一个项目中有这样一个场景(代码来源于真实场景和研究，已做脱敏)：
商家侧某活动已选商品展示如果只有一个商品后面的文字要限制在一定区域，溢出省略效果 ——

但笔者接手初期是这样的：

的确，多行展示确实能带给用户比单行展示更多的体验感，但上一个前辈用了这个东西： display: -webkit-box;！webkit前缀！所以在文字极多且非webkit的浏览器中是这样的：

当然这种场景几乎是很少见的，所以以至于一直保持这样；又当然可以用伪元素伪造“…”去解决，但是效果太生硬。一般不会直接去使用而是优先考虑其它方案(产品的胜利

文字溢出省略和用户体验优化相关推荐

CDN高级技术专家周哲：深度剖析短视频分发过程中的用户体验优化技术点
摘要: 深圳云栖大会已经圆满落幕,在3月29日飞天技术汇-弹性计算.网络和CDN专场中,阿里云CDN高级技术专家周哲为我们带来了<海量短视频极速分发>的主题分享,带领我们从视频内容采集.上 ...
深度剖析短视频分发过程中的用户体验优化技术点
2018深圳云栖大会已经圆满落幕,在飞天技术汇-弹性计算.网络和CDN专场中,阿里云CDN高级技术专家周哲为我们带来了<海量短视频极速分发>的主题分享,带领我们从视频内容采集.上传.存储和 ...
网络产品用户体验优化系列［一］概要
网络产品用户体验优化系列［一］概要很高兴能在这里和大家专门沟通用户体验方面的话题,特别是能够收集大家对网络产品用户体验的反馈,以及网络产品团队在用户体验方面的优化和更新.这个系列我们只谈用户体验. ...
移动常见问题--H5标签之浏览器兼容性、JS之浏览器兼容性、CSS3之浏览器兼容性、移动端动画、click300ms延迟、单行和多行文字溢出省略、水平居中和垂直居中
1. H5标签之浏览器兼容性在移动端时可以放心的使用h5相关的标签但是如果需要兼容一些低版本的浏览器,例如IE6/7/8,此时可以到 [兼容] 下载一个 html5shiv.min.js 文件 ...
Silverlight用户体验优化
Silverlight用户体验优化在发布Silverlight应用后有一个需要考虑的重要问题是:假如访客没有安装Silverlight,你就需要提供无缝的Silverlight安装体验,使用户体验中 ...
【转载】专家答疑：Silverlight的用户体验优化
原文地址:专家答疑:Silverlight的用户体验优化专家答疑:Silverlight的用户体验优化作者: 博客园, 出处:博客, 责任编辑: 杜飞, 2010-01-29 13:18 在发布S ...
移动端SEO之用户体验优化提升方法
移动端SEO之用户体验优化,前面一篇江西SEO曾庆平讲完了移动站响应式的实现,我们再扩展一下,看看移动端网站还可以在哪些用户体验上面做提升. 1.一键拨号如果需要在移动浏览器中实现一键拨号的功能, ...
如何构建用户体验优化体系？
在前几期的直播中,我们为大家介绍了监控和日志相关的一些内容.监控分为三个阶段,基础监控.应用监控.业务监控.前面我们已经分享了基础监控的部分,今天主要为大家带来用户体验优化的一些分享. 用户体验,是指 ...
三句话不离开用户体验的seo专员到底如何做好用户体验优化？
在网站优化中新人永远在摸索入门而老手还在用数据经验做交谈,相比接触过网站优化的人士都知道,seo专业人士三句话离不开用户体验,连带着自己的气场都高大上了起来.那么用户体验究竟是什么呢?下面我们就针对该 ...

最新文章

热门文章