CSS文字处理

前言

平时在工作中经常遇到文字相关的各种问题，例如：文字溢出、对齐、截断等各种问题。
so，就记录一下经常遇到的一些解决方案。

使用场景

下面介绍一些使用场景

两端对齐,最后一行居中对齐

不过此属性浏览器的支持不行。ios和安卓不支持

1
<div class="justify-text">
2
     <div class="text">账号</div>
3
     <div class="text">密码</div>
4
     <div class="text">电子邮件</div>
5
</div>
1
.justify-text{
2
     margin: auto;
3
     .text {
4
           padding: 0 20px;
5
           margin-top: 10px;
6
           width: 100px;
7
           background-color: red;
8
           line-height: 40px;
9
           text-align-last: justify;
10
           color: #fff;
11
           list-style: none;
12
           }
13
}

文本溢出控制

单行文本溢出

1
.ellipsis {
2
    width: 200px;      // 需要改一个宽度
3
	overflow: hidden; // 溢出隐藏
4
	text-overflow: ellipsis; // 溢出修饰 ellipsis省略号
5
	white-space: nowrap; // 文本不会换行
6
}

多行文本溢出

多用于移动端页面，因为移动设备浏览器更多是基于 webkit 内核,比如Firefox, IE 浏览器不支持该属性。

1
.ellipsis {
2
    width: 200px;
3
	display: -webkit-box;   // 将对象作为弹性伸缩盒子模型显示
4
	-webkit-line-clamp: 2;
5
    -webkit-box-orient: vertical;  // 设置或检索伸缩盒对象的子元素的排列方式
6
	overflow: hidden;
7
	text-overflow: ellipsis;
8
}
CSS
文字处理

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！