再学HTML5之内容溢出

时间:2024-03-13 11:07:54

内容溢出的处理方式
今天在学习过程中讲到文本内容的溢出,其出现的主要原因是设定的内容盒大小固定后,文本内容过多而造成溢出。处理方式有:
1.先将文本内容输入后,可不设置内容盒的大小,其默认大小不会造成溢出,但是为了整体的布局美观,这种方法通常不可取。
2.第二种就是今天学到的内容隐藏,在以前的学习中老师并没有讲到具体的代码是
overflow英文直译就为溢出,通过overflow:hidden即可实现文本多余内容盒大小的文本进行隐藏
但是会影响使用者的阅读体验,毕竟读不完会引起好奇心,隐藏后我目前还找不到方法读到隐藏的内容。于是就有了第三种方法。
3.生成滚动条。通过滚动条可以较为完美的实现内容溢出的处理
其本身也是内容溢出的一种处理方式overflow:scroll。可生成x轴和y轴的滚动条。
overflow-x|y。然而我却遇到了问题:
再学HTML5之内容溢出指定某条轴的滚动条后另外一条轴的滚动条依然存在!!!
同时第二种方法由于能勾起用户的好奇心可用作文章标题,内容溢出后在设置文本溢出text-overflow设定为圆点即可以用作文章标题了。