css小工具——文字换行之word-wrap: break-word、鼠标小手-cursor:pointer、滚动条-overflow-y:auto、超出…或超出省略号-text-overflow

css小工具——文字换行之word-wrap: break-word、鼠标小手-cursor:pointer、滚动条-overflow-y:auto、超出…或超出省略号-text-overflow: ellipsis

1、文字换行

元素明明设置了宽度,但是竟然溢出了,添加上以下代码让其自动换行

.wg-width{
  display:inline-block;
  width:320px;
  line-height: 18px;
  word-wrap: break-word  //自动换行
}

2、鼠标小手

• default 默认，光标为箭头
• crosshair 十字线

.click-btn{
    cursor:pointer;
}

3、滚动条

使用overflow的属性 auto 和scroll 可以在内容超出的时候出现滚动条。

overflow 设置包括水平和竖直方向内容溢出时的操作
overflow-x 设置水平方向内容溢出时的操作
overflow-y 设置竖直方向内容溢出时的操作

这里以overflow-y为例，overflow-y的值有一下几种：

.wg-content{
  padding: 5px 10px 5px 17px;
  margin-top: -10px;
  height: 62px;
  overflow-y:auto  // 滚动条
}

通常情况下，只要设置overflow-y:auto,就可以实现内容超出时出现滚动条，没有超出时没有滚动条的功能！

下面介绍改变滚动条默认样式的方法,采用的auto，主要用到的滚动条的属性有

参数名称	释义
::-webkit-scrollbar	设置滚动条整体宽度
::-webkit-scrollbar-track	设置滚动条的轨道的样式
::-webkit-scrollbar-thumb	设置滚动条的滑块的样式

4、超出…

.name{
    display: inline-block;
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space: nowrap; //溢出不换行
    width: 165px;    
}

效果

附

//一行
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
//两行
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: normal !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;