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

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

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

正常情况：

店员昵称为：小明同学     

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

数据较短

非正常情况：

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

店员昵称为：莱奥纳多·达·芬奇（LEONARDO DA VINCI）         

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

数据过长

优化后的效果：

友好展示

实现思路：

思路代码