背景透明
background:transparent
单词内的断句
word-wrap
:用来标明是否允许浏览器在单词内进行断句,为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。默认值normal,可选值break-word。
word-break
:标明怎样进行单词内的断句。默认值normal,可选值为break-all,keep-all。
行内元素不换行设置
{{reportInfo.menuName}}
// 单行
.report-info-list {
line-height: 20px;
max-width: 176px;
cursor: pointer;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color:rgba(255,255,255,.65)
}
// 双行
.report-info-list {
overflow: hidden;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
}
display 属性
值 描述
none
此元素不会被显示。
block
此元素将显示为块级元素,此元素前后会带有换行符。
inline
默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block
行内块元素。(CSS2.1 新增的值)
list-item
此元素会作为列表显示。
run-in
此元素会根据上下文作为块级元素或内联元素显示。
compact
CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
marker
CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table
此元素会作为块级表格来显示(类似 <table>
),表格前后带有换行符。
inline-table
此元素会作为内联表格来显示(类似 <table>
),表格前后没有换行符。
table-row-group
此元素会作为一个或多个行的分组来显示(类似 <tbody>
)。
table-header-group
此元素会作为一个或多个行的分组来显示(类似 <thead>
)。
table-footer-group
此元素会作为一个或多个行的分组来显示(类似 <tfoot>
)。
table-row
此元素会作为一个表格行显示(类似 <tr>
)。
table-column-group
此元素会作为一个或多个列的分组来显示(类似 <colgroup>
)。
table-column
此元素会作为一个单元格列显示(类似 <col>
)
table-cell
此元素会作为一个表格单元格显示(类似 <td>
和 <th>
)
table-caption
此元素会作为一个表格标题显示(类似 <caption>
)
inherit
规定应该从父元素继承 display 属性的值。
滚动条样式
::-webkit-scrollbar {
width: .07rem;
height: 20px;
}
::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.15);
border-radius: 28px;
}
.ivu-tabs-tabpane::-webkit-scrollbar-thumb:hover {
background: #fff;
}
.ivu-tabs-tabpane::-webkit-scrollbar-thumb:active {
background: #fff;
}