网页制作数据过多时不影响页面布局的技巧
企业网站的迅速发展,对用户交互体验需要也越来越高,web前端开发者需要考虑更多,怎样通过前端的控制,让用户数据更高效的显示。
b.内容自动换行:word-wrap:break-word(中文,英文语句,长串字母都能实现);
注意点:长串字母实现前提,必须将宽度限制直接添加到“文本内容的标签”。
b.超出范围隐藏:overflow:hidden;
b.超出范围隐藏:overflow:hidden;
c.显示省略号:text-overflow:ellipsis;
解决方法:
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;