css 样式设置

前言：

• css有许多实用性的样式设置，常常不实用可能会被忘记，但是一旦使用起来，能解决许多问题

1. 数字、字母在样式中自动换行，

word-break: break-all;  
break-all  ：   严格断字模式，解决问题

2.文本域回车换行，（没有
）换行

     white-space: pre-line;  

• 解决又是文字或者英文单词在中间换行的问题

3.设置字体间距

 letter-spacing:5px   

4.设置首行缩进字符

    text-indent:80px;

5. 单行文本省略

 overflow: hidden; 
text-overflow:ellipsis;
 white-space: nowrap;  

6.多行文本省略

 text-overflow: ellipsis;
 display: -webkit-box; 
-webkit-line-clamp: 2; 
-webkit-box-orient: vertical;  

7.滚动条样式设置

• 单独写在这里了

8.改变图片颜色

filter: grayscale(0.5);

• 该属性有许多参数，不仅仅是将图片变成黑白色，还有其他色彩

9.文字描边

// 方法一 stroke
 -webkit-text-stroke: 1px  #FFF;

//方法二：shadow
 text-shadow: 0 1px #FFF, 1px 0 #FFF, -1px 0 #FFF, 0 -1px #FFF;

10.元素宽高自适应方式

该属性在img上使用最多，当想在div中把图片全部展示出来，但又担心是否使用height:100%或width:100%,会让展示不全时，就赶紧用它吧。

object-fit: contain;   

11. 文字纵向展示 书写模式

 writing-mode: vertical-lr; 

// writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom
vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left
vertical-lr：垂直方向内内容从上到下，水平方向从左到右
sideways-rl：内容垂直方向从上到下排列
sideways-lr：内容垂直方向从下到上排列

详情

12.禁止文字复制

user-select是CSS3 UI规范中新增的一个功能，用来控制内容的可选择性。它可以防止用户选择或复制元素中的内容。

    user-select: none;