css实用小技巧

css 截断单词并添加-，设置定宽

p{
  width:100%;  /*设置内容宽度*/
  word-break:break-word;  /*截断单词*/
  hyphens:auto;  /*自动添加连字符*/
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  text-align:justify;  /*自动调整词间距*/
}

css 单行文本溢出

overflow: hidden;  /* 隐藏超出部分 */
white-space: nowrap;   /* 超出的文本保持在一行 */
text-overflow: ellipsis;  /* 截断文本处显示省略号 */

<div class="line">我是宇宙无敌世界第一国服超前省级一霸市里一帅村里鬼才家里最可爱的~lemonwater~</div><br/>
<div class="line-en line">
  I am [invincible in the universe] [World first] [Top in the national ranking] [Provincial tyrant] [A handsome   man in the city] [Ghost talent in the village] [The most lovely family]~ lemonwater~
</div>      

css 多行文本溢出(-webkit-)

display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
-webkit-box-orient: vertical;  /* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-line-clamp: 2;  /* 限制在一个块元素显示的文本的行数 */
 overflow: hidden;

<div class="muti-lines">我是宇宙无敌世界第一国服超前省级一霸市里一帅村里鬼才家里最可爱的~lemonwater~</div><br/>
<div class="muti-line-en muti-lines">
  I am [invincible in the universe] [World first] [Top in the national ranking] [Provincial tyrant] [A handsome   man in the city] [Ghost talent in the village] [The most lovely family]~ lemonwater~
</div>

用伪元素控制多行文本溢出时显示…

.muti-lines-no-webkit:after {
            content: "...";
            position: absolute;
            bottom: 0;
            right: 40px;
            padding-left: 40px;
            background: -webkit-linear-gradient(left, transparent 0%, lightslategray 55%);
            background: -o-linear-gradient(right, transparent 0%, lightslategray 55%);
            background: -moz-linear-gradient(right, transparent 0%, lightslategray 55%);
            background: linear-gradient(to right, transparent 0%, lightslategray 55%);
        }

<div class="muti-lines-no-webkit">我是宇宙无敌世界第一国服超前省级一霸市里一帅村里鬼才家里最可爱的~lemonwater~</div><br />
<div class="muti-line-en muti-lines-no-webkit">
I am [invincible in the universe] [World first] [Top in the national ranking] [Provincial tyrant] [A handsome man in the city] [Ghost talent in the village] [The most lovely family]~ lemonwater~
</div>

css 用伪元素添加hover效果

.btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    text-align: center;
    line-height: 80px;
	background-color: lavender;
}
@keyframes rotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* 当该伪元素 hover 时，才显示该伪元素。 */
.btn-item:hover:before {
    content: '';
    position: absolute;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 2px dashed lightcoral;
    animation: rotation 3s linear infinite alternate;
	/*rotation添加旋转动画*//*infinite动画循环播放*//*alternate轮流反向播放*/
    transition: all 3s ease;   /*添加动画缓冲效果*/
}