CSS所用到的样式

CSS样式

添加滚动条

• overflow
• anto 自动 当

CSS样式

添加滚动条

• overflow
  • anto 当内容没有超过div的高度的时候不显示滚动条超过则显示
  • scroll 默认添加滚动条

超出文本省略

• 单行

  • overflow: hidden; /*溢出隐藏*/

  • text-overflow: ellipsis; /*超出部分显示省略号*/

  • display:inline-block;/*设置为行内块元素可以给其设置宽度*/

  • white-space: nowrap; //是否换行

    • nowrap 不换行

  • width:60%; /*设置宽度*/

  •     overflow: hidden;
            display: inline-block;
            max-width: 60%;
            text-overflow: ellipsis;
            white-space: nowrap; 
            line-height: 32px;//一般设置为div的宽度让其字体居中
    

• 多行

  • display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    

给超出的字体换行

• 当录入的文字超过定义的宽度后会自动换行，但当录入的数据是一堆没有空格的字符或字母或数字（常规数据应该不会有吧，但有些测试人员是会这样子做的），超过容器宽度时就会把容器撑大，不换行。

word-break:break-all; /支持IE，chrome，FF不支持/

word-wrap:break-word;/支持IE，chrome，FF/