美文网首页
前端web开发如何处理文字溢出

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

作者: 郭鹏松 | 来源:发表于2017-07-17 17:13 被阅读35次

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

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

    正常情况:

    店员昵称为:小明同学     

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

    数据较短

    非正常情况:

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

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

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

    数据过长

    优化后的效果:

    友好展示

    实现思路:

    思路代码

    相关文章

      网友评论

          本文标题:前端web开发如何处理文字溢出

          本文链接:https://www.haomeiwen.com/subject/cdkfkxtx.html