前端web开发如何处理文字溢出

2017-07-17  本文已影响35人  郭鹏松

做前端web开发的朋友可能经常会遇到这个问题,页面中一些区域是由后台渲染的数据,但是页面空间有限,尤其是移动端,手机屏幕区域有限,有时候 后台数据返回的文字过多,会造成溢出,往往会出现换行,高度撑开,或者溢出等不友好的显示。

我这里以一个店员管理的web页面作为实例,来带大家解决一下类似于这种问题。为了表现出问题所在,我将数据字符的长度夸张展示了,意在表达问题,有助于大家理解。

正常情况:

店员昵称为:小明同学     

店铺名称为:小明同学的店铺

数据较短

非正常情况:

因为后台返回来的店员和店铺名称为用户自定义的,字符串长度并不固定,就会出现以下情况。

店员昵称为:莱奥纳多·达·芬奇(LEONARDO DA VINCI)         

店铺名称为:莱奥纳多·达·芬奇(LEONARDO DA VINCI)的充满幻想的神秘小屋

数据过长

优化后的效果:

友好展示

实现思路:

思路代码
上一篇下一篇

猜你喜欢

热点阅读