CSS中文本对齐方式-文本处理案例

Posted JackieDYH

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS中文本对齐方式-文本处理案例相关的知识,希望对你有一定的参考价值。

文本对齐方式

CSS最常用的对齐方式,居中对齐、左对齐(默认)、右对齐,而且实现起来也是非常的简单

p{
 text-align: center;
 text-align: left;
 text-align: right;
}

但是两端对齐你有用过吗?

只需要添加text-align-last:justify样式即可

<div class="justify-text">
 <div class="li">账号</div>
 <div class="li">密码</div>
 <div class="li">电子邮件</div>
</div>
scss样式

.justify-text {
	.li {
		padding: 0 20px;
 margin-top: 10px;
		width: 100px;
		background-color: #f13f84;
		line-height: 40px;
		text-align-last: justify;
		color: #fff;
 list-style: none;
		&:first-child {
			margin-top: 0;
		}
	}
}

 文本排版方向

现代书本上的文字都是从左到右的顺序排列,但是古时候不同,文字都是从右至左排列的,现在在很多古籍、牌坊、石碑等上面依旧可以看到从右至左的文字。

css也可以调整文本排版方向,是通过什么属性控制的呢?

writing-mode 属性定义了文本在水平或垂直方向上如何排布。

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:内容垂直方向从下到上排列
<div class="bruce flex-ct-x">
	<div class="vertical-text">
		<h3>诗经</h3>
		<p>
 死生契阔,<br>
 与子成说。<br>
 执子之手,<br>
 与子偕老。
 </p>
	</div>
</div>
scss样式

.vertical-text {
	writing-mode: vertical-rl; // 文字排版方向
	h3 {
		padding-left: 10px;
		font-weight: bold;
		font-size: 18px;
		color: #d60f5c;
	}
	p {
		line-height: 30px; // 行间距
 letter-spacing: 7px; // 文字间距
		color: #ee1166;
	}
}

文本从右至左排列

<div class="reverse-text">
 红豆生南国<br/>
 春来发几枝<br/>
 愿君多采撷<br/>
 此物最相思
</div>
scss样式

.reverse-text {
	font-weight: bold;
	font-size: 30px;
	color: #f13f84;
 width: 200px;
	letter-spacing: -70px; // letter-spacing最少是font-size的2倍
}

 文本溢出控制

 文本溢出处理不管是PC或者是H5,都是非常常见的,非详情页面都会经常用到。

文本溢出处理分为:单行文字溢出 和 多行文字溢出。下面看看具体示例:

单行文字溢出

<div class="ellipsis">昨夜雨疏风骤,浓睡不消残酒。试问卷帘人,却道海棠依旧。知否,知否,应是绿肥红瘦。</div>
scss样式

.ellipsis {
 width: 200px;
	overflow: hidden; // 溢出隐藏
	text-overflow: ellipsis; // 溢出修饰 ellipsis省略号
	white-space: nowrap; // 文本不会换行
}

 多行文字溢出

<div class="ellipsis">寻寻觅觅,冷冷清清,凄凄惨惨戚戚。乍暖还寒时候,最难将息。三杯两盏淡酒,怎敌他、晚来风急!雁过也,正伤心,却是旧时相识。
满地黄花堆积,憔悴损,如今有谁堪摘?守着窗儿,独自怎生得黑!梧桐更兼细雨,到黄昏、点点滴滴。这次第,怎一个愁字了得!</div>
scss样式

.ellipsis {
 width: 400px;
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	/* autoprefixer: off */
	-webkit-box-orient: vertical;
	/* autoprefixer: on */
}

 注意

 使用文本溢出处理时,容器一定要定义宽度。

多行文字溢出,scss样式添加注释autoprefixer: off并不是为了说明什么,而是,在webpack打包编译时,如果没有这个注释,-webkit-box-orient: vertical会被忽略掉。

文本选择颜色


在浏览器中,当你选择文本想要copy时,是不是会发现选择文本会有背景色和文字颜色呢?其实它是可以通过css定义的。

使用::selection自定义文本选择颜色

<div class="select-color">
 <p>红豆生南国,</p>
 <p class="special">春来发几枝。</p>
 <p>愿君多采撷,</p>
 <p class="special">此物最相思。</p>
</div>
scss样式

// 全局文本选择样式
::selection {
	background-color: #f13f84;
	color: #fff;
}
.select-color {
	line-height: 30px;
	font-weight: bold;
	font-size: 30px;
	color: #d60f5c;
}
// 具体某个选择器下 文本选择样式
.special::selection {
	background-color: #00b7a3;
}

以上是关于CSS中文本对齐方式-文本处理案例的主要内容,如果未能解决你的问题,请参考以下文章

CSS文字处理实用小技巧总结

css 文本操作

CSSCSS 文本样式 ④ ( CSS 外观属性 | color 文本颜色 | text-align 文本对齐方式 | line-height 行间距设置 | 首行缩进设置 | 文本装饰设置 )

怎么用CSS样式使文本居中对齐

使用 css 在 TextArea 内设置文本对齐不起作用

li内的CSS垂直对齐文本