文本长度控制

用户数据(长度控制方法)

随着网站的迅速发展,对用户交互体验需要也越来越高,web前端开发者需要考虑更多,怎样通过前端的控制,让用户数据更高效的显示。
要达到的目标是: 数据过多时,不会影响页面布局
解决方法:
1,在不影响布局的情况下,可以选择,数据自动换行
      a.设置宽度限制:可以使用width值和max-width最大宽度值。
      b.内容自动换行:word-wrap:break-word(中文,英文语句,长串字母都能实现);
       注意点:长串字母实现前提,必须将宽度限制直接添加到“文本内容的标签”。

2,控制数据超出一定范围,自动隐藏——通过title值来显示全部数据信息
      a.设置宽度限制:可以使用width值和max-width最大宽度值。
      b.超出范围隐藏:overflow:hidden;

3,控制数据超出一定范围,自动隐藏,并显示省略号...——通过title值来显示全部数据信息
      a.数据不换行:white-space:nowrap;
      b.超出范围隐藏:overflow:hidden;
      c.显示省略号:text-overflow:ellipsis;

工作中整理出来的方法,可以提高自己的技术。
突然想起:学习知识的过程:
1,首先是学习基础知识的过程
2,其次是反复实践(没有实践,理论再好,也不能说自己学到了)
3,最后可以将自己所学,总结出来,分享给大家。(让想学的人学会)
总结一句话:学习是个长期积累,不断研究的一个过程。

自己的语言组织能力,表达能力很差,但希望自己可以提高。
缺点也很明显:自己学到的东西,表达不出来。
加油!!!

转载于:https://www.cnblogs.com/MyFlora/archive/2012/05/08/2490812.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值