CSS常用技巧（2）——文本类

一、超出区域文本以省略号显示

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

二、强制换行

white-space:normal;  
word-break:break-all;

三、文本缩进

text-indent：12px

四、文字描边

text-shadow:-1px 0 black,0 1px black,1px 0 black,0 -1px black;

五、文字外发光

text-shadow:0 0 0.2em #f87

六、字体渐变：

background: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96); // 背景色渐变 
-webkit-background-clip: text;         // 规定背景的划分区域 
-webkit-text-fill-color: transparent;  // 防止字体颜色覆盖 

七、表格td超出隐藏

设置table样式

<table style="table-layout:fixed"></table>

八、通过<hr>实现双虚线：

<hr style=”border:1px dashed;100%;height:1px;”></hr>

九、通过display:box ;line-clamp实现多行溢出点点效果：

.box {
     400px; 
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

十、数字超宽换行

word-wrap: break-word;

十一、CSS设置多张背景：

background:url("haoroomsCSS1_s.jpg") 0 0 no-repeat,
url("haoroomsCSS2_s.jpg") 200px 0 no-repeat,
url("haorooms.jpg") 400px 201px no-repeat;

或者：

background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;  
background-position: 0 0, 200px 0, 400px 201px;  

background-blend-mode: lighten; // 可以设置多张背景图的混合模式；

十二、去掉input:-webkit-autofill 浏览器默认黄色

方法一：

<input type="text"  autocomplete="off">

方法二：

-webkit-box-shadow: 0 0 0px 1000px white inset

十三、文字竖向排列

writing-mode:tb;

十四、table样式

• 实线边框：

<table border="1" cellspacing="0" cellpadding="0">

• 边框合并：

border-collapse: collapse;