1. 文字超出显示省略号
.overtext {
width: 100px; /*随意*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
text-overflow: clip | ellipsis
clip: 不显示省略号（...）
ellipsis: 当文本内容溢出时显示省略号（...）
2. 多行文字显示省略号
.overtext {
width: 100%;
overflow: hidden;
display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示 *必须结合的属性**/
-webkit-box-orient: vertical; /*设置伸缩盒对象的子元素的排列方式 *必须结合的属性* */
-webkit-line-clamp: 3; /*用来限制在一个块元素中显示的文本的行数*/
word-break: break-all; /*让浏览器实现在任意位置的换行 *break-all为允许在单词内换行**/
}
3. 文字渐变
.text-gradient {
background-image: linear-gradient(113deg, deeppink, deepskyblue);
-webkit-background-clip: text;
color: transparent;
/**
* linear-gradient:([point | angle], start, end)
* 第一个参数标识线性渐变的方向（top,left,right,bottom, left top, ...），也可以是角度(180deg)
* 第二个参数是开始的颜色
* 第三个参数为结束的颜色
*/
}
这是测试用例这是测试用例这是测试用例这是测试这是测试用例这是测试用例这是测试用例这是测试这是测试用例这是测试用例这是测试用例这是测试这是测试用例这是测试用例这是测试用例这是测试
4. 水平垂直居中
<div class="parent">
<div class="child"></div>
</div>
css 代码
1、
.parent {
width: 200px;
height: 200px;
border: 1px solid red;
/* 重点代码 */
display: flex;
justify-content: space-around;
align-items: center;
}
.child {
width: 20px;
height: 20px;
border: 1px solid red;
}
2、
.parent {
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
}
.child {
width: 20px;
height: 20px;
border: 1px solid red;
position: absolute;
/* 1 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 2 */
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
5. 文字禁止选中
.disabled-selec {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}
6. 文字竖排
.cloumn-text {
width: 20px;
height: auto;
line-height: 18px;
border: 1px solid red;
font-size: 20px;
word-wrap: break-word;
}
7. 文字换行
/* 允许在单词内换行。给定div宽，字符超过指定宽度就会自动换行。如果该行末端有个英文单词很长（confidence等），它会把单词截断，变成该行末端为con(confidence的前半部分)，下一行为fidence（fidence的后端部分）。 */
word-break: break-all;
/* 允许长单词换行到下一行。例子与上面一样，但区别就是它会把confidence整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，不会截断单词。 */
word-wrap: break-word;
