H5学习笔记7 文本溢出 单行省略号

文本溢出

 

  • 文本溢出
1 overflow
2 overflow:visible; 默认值超出就溢出
3 overflow:hidden;  溢出隐藏
4 overflow:scroll;  无论溢出不溢出都有滚动条
5 overflow:auto;    溢出的时候出现滚动条

 

  • overflow 可以分方向
1 overflow-x  横轴
2 overflow-y  纵轴

 

  • 拓展
1 div{
2     overflow-y：auto；
3     overflow-x：hidden；
4 }
此时代表div溢出时只有纵向滚动条



  • 文本原样输出
1 white-space
2 white-space：wrap默认值 折行
3 white-space：nowrap 让文本在一行显示  ***
4 white-space：pre； 原样输出 编辑器里什么样 在浏览器里就是什么样子 不可以使用！！！
5 white-space：pre-line-多个空格直接省略 多个空格 只显示一个空格
6 white-space：pre-wrap  让html浏览器显示空白空格符

 

  • 隐藏部分显示 
1 text-overflow
2 clip 默认值 裁切
3 ellipsis 裁切部分 用。。。显示

 

  • 单行文本省略号
1 设置宽度        width：value;
2 文本一行显示    white-space：nowrap
3 溢出隐藏        overflow-x：hidden；
4 隐藏部分省略号显示  text-overflow:ellipsis;

 

 

posted @ 2021-04-13 20:25  一水州  阅读(245)  评论(0)    收藏  举报