1.超出顯示省略號
.title
// 超出兩行顯示...
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
2.內容局左居中對齊
.tip
.content
.status-tip,
.remark-tip
="tip"
>
="content"
>
="status-tip"
>
提交結果:審核成功
<
/div>
="remark-tip"
>
備註:test
3.超出可以滾動,但不顯示滾動條
overflow-x: scroll;
white-space: nowrap;
&::-webkit-scrollbar
4.flex布局
// flex-direction決定主軸的方向
flex-direction: row | row-reverse | column | column-reverse;
// flex-wrap 是否換行
flex-wrap: nowrap | wrap | wrap-reverse;
// flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式,預設值為row nowrap
flex-flow:
||;// justify-content屬性定義了專案在主軸上的對齊方式。
justify-content: flex-start | flex-end | center | space-between | space-around;
// align-items屬性定義專案在交叉軸上如何對齊。
align-items: flex-start | flex-end | center | baseline | stretch;
修改placeholder顏色
input:
:-webkit-input-placeholder
textarea:
:-webkit-input-placeholder
6.不換行等分
// 不換行等分,盒子之間的間距可變,盒子的數量可變
.container
.box
.box +
.box
="container"
>
="box"
>
box1
<
/div>
="box"
>
box2
<
/div>
="box"
>
box3
<
/div>
="box"
>
box4
<
/div>
="box"
>
box5
<
/div>
<
/div>7.三等分
// 不換行的三等分
.container
.box
="container"
>
="box"
>
box1
<
/div>
="box"
>
box2
<
/div>
="box"
>
box3
<
/div>
<
/div>
// 換行的三等分
.container
.container:
:after
.box
="container"
>
="box"
>
box1
<
/div>
="box"
>
box2
<
/div>
="box"
>
box3
<
/div>
="box"
>
box4
<
/div>
="box"
>
box5
<
/div>
<
/div>8.textarea去掉右側滾動條,去掉右下角拖拽
overflow:hidden;
resize:none;
9.強制換行
word-
break
:break
-all;
/*支援ie,chrome,ff不支援*/
word-wrap:
break
-word;
/*支援ie,chrome,ff*/
10.清除input預設樣式
11.修改antd placeholder顏色
.ant-input::-webkit-input-placeholder,
.ant-time-picker-input::-webkit-input-placeholder
.ant-input:-moz-placeholder,
.ant-time-picker-input:-moz-placeholder
.ant-input:-ms-input-placeholder,
.ant-time-picker-input:-ms-input-placeholder
.ant-select-selection__placeholder
css常用樣式屬性總結
在css樣式表中,常用樣式屬性 文字屬性 說 明 font size 字型大小 font family 字型型別 font style 字型樣式 color 設定或檢索文字的顏色 text align 文字對齊 背景屬性 說 明 background color 設定背景顏色 background ...
總結css常用的樣式
會持續更新 1 強制文字換行 div2 input更改placeholder顏色 webkit browsers input webkit input placeholder mozilla firefox 4 to 18 input moz placeholder mozilla firefox ...
CSS常用文字樣式總結
css文字樣式是相對於內容進行的樣式修飾。由於在層疊關係中,內容要高於背景。所以文字樣式相對而言更加重要。有些人對文字和字型樣式之間的不同不太了解,簡單地講,文字是內容,而字型則用於顯示這個內容。本文將詳細介紹文字相關樣式。首行縮排 定義首行縮排是將段落的第一行縮排,這是常用的文字格式化效果。一般地...