css3文字-CSS 实用方法讲座 1：文字处理

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

点击右上角白色按钮，关注“网络秀”，让你真正秀起来

前言

作为程序员，我们也需要很多编写代码的技巧。 好的代码可以让人耳目一新css3文字，易于理解，同时也能给自己一种成就感。 因此，这里提供一些简单的CSS开发方法，希望你能写出清爽、易懂、舒适、自然的代码。

CSS 实用方法讲座 1：文字处理

这篇总结主要围绕css进行文本处理的方法，有兴趣的可以收藏。

文本对齐方式

CSS最常用的对齐方式有居中对齐、左对齐（默认）、右对齐，而且实现起来也特别简单。

如下：

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

但你曾经使用过合理的目的吗？

只需添加 text-align-last: justify 样式即可。 参见示例：

 
账号
 
密码
 
电子邮件

CSS风格

.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 实用方法讲座 1：文字处理

文字布局方向

现代书籍中的字符是从左到右排列的，但在古代，字符是从右到左排列的。 现在在很多古书、牌坊、石碑等上仍然可以看到从右到左的文字。

CSS还可以调整文字布局的方向，是用哪些属性来控制的呢？

writing-mode 属性定义文本如何水平或垂直布局。

书写模式：水平tb | 垂直-rl | 垂直-lr | 侧身-rl | 侧身-lr

我们来看一个具体的例子：

	

		
诗经
		

 死生契阔，

 与子成说。

 执子之手，

 与子偕老。
 
	

CSS风格

.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;
	}
}

CSS 实用方法讲座 1：文字处理

文本从右向左流动

 红豆生南国

 春来发几枝

 愿君多采撷

 此物最相思

CSS风格

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

CSS 实用方法讲座 1：文字处理

文本溢出控制

无论是PC还是H5，文本溢出处理都是很常见的，常用于非详情页面。

文本溢出处理分为：单行文本溢出和多行文本溢出。 我们来看一个具体的例子：

单行文本溢出

昨夜雨疏风骤，浓睡不消残酒。试问卷帘人，却道海棠依旧。知否，知否，应是绿肥红瘦。

CSS风格

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

CSS 实用方法讲座 1：文字处理

多行文本溢出

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

CSS风格

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

CSS 实用方法讲座 1：文字处理

注意

当使用文本溢出处理时，容器必须定义长度。

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

文本选择颜色

在浏览器中，当你选择文本想要复制时，你会发现选中的文本会有背景色和文字颜色吗？ 其实可以通过css来定义。

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

 
红豆生南国，
 
春来发几枝。
 
愿君多采撷，
 
此物最相思。

CSS风格

// 全局文本选择样式
::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 实用方法讲座 1：文字处理

总结

如果有时间的话，准备一下CSS3及其选择器以及伪元素和伪类等知识点，做到温故知新。 使用Chrome的DevTools调试CSS，通过填写提示可以发现很多有趣的属性。 尝试不同的形式来实现同样的功能，多练习。 在项目中尝试更多CSS的新特性，不要总是被低版本浏览器所限制，这样你永远无法进步。 在使用JS完成一个简单的疗效之前，想一下是否可以用纯CSS完成。 这样你的CSS技能就可以逐步提高。

最后css3文字，感谢您的支持。

提示：如果有问题或者需要大厂提拔+我的脉搏：丛培森('ω')

在 CSS3 之前，我们可以将图像添加到背景中

CSS3 允许我们向一个元素添加多个图像

多个背景图像

<div class="demo"></div>

.demo {
    width: 600px;
    height: 200px;
    border: 1px solid black;
    background: url('1.png') no-repeat;
}

多个背景可以在background属性中添加多个图片资源css3 背景图片，用冒号分隔

然后使用背景位置将它们放置在您想要的位置

.demo {
    width: 600px;
    height: 200px;
    border: 1px solid black;
    background: url('1.png') no-repeat,
                url('2.png') no-repeat 200px 0,
                url('3.png') no-repeat 400px 0;
}

如果不设置no-repeat，下面的图片资源会覆盖里面的图片资源

#图像起始位置background-origin#

背景原点允许我们定义图像开始定位的位置

可选属性值padding-box（默认）、border-box、content-box；

padding-box 默认图像从内行间距开始

我们可以通过添加行间距来证明这一点

.demo {
    width: 600px;
    height: 200px;
    border: 20px solid gray/*改*/;
    padding: 20px/*增*/;
    background: url('1.png') no-repeat,
                url('2.png') no-repeat 200px 0,
                url('3.png') no-repeat 400px 0;
}

[注意：css不能注释。 我这样评论是为了凸显疗效。 别被骗了]

border-box 定义图片从边框开始

.demo {
    width: 600px;
    height: 200px;
    border: 20px solid gray;
    padding: 20px;
    background: url('1.png') no-repeat,
                url('2.png') no-repeat 200px 0,
                url('3.png') no-repeat 400px 0;
    background-origin: border-box/*增*/;
}

改成border-box，我们发现部分图片被挡在了红色背景色上面

可以理解为边框实际上是在元素的前面

.demo {
    width: 600px;
    height: 200px;
    border: 20px solid gray;
    padding: 20px;
    background: url('1.png') no-repeat,
                url('2.png') no-repeat 200px 0,
                url('3.png') no-repeat 400px 0;
    background-origin: content-box/*改*/;
}

content-box 定义元素内容部分的起始位置

#图像剪辑background-clip#

虽然我们的起始位置设置为内容区域

但这并不意味着我们的图片仅限于内容领域

可以在元素的整个边框上和边框内进行绘制

这可以通过稍微改变里面的代码来证明

.demo {
    width: 600px;
    height: 200px;
    border: 20px solid transparent/*改*/;
    padding: 20px;
    background: url('1.png') no-repeat,
                url('2.png') no-repeat 200px 0,
                url('3.png')/*删掉no-repeat 默认repeat*/ 400px 0;
    background-origin: content-box;
}

那么有没有办法设置图像显示的范围呢？

这使用了我们的background-clip属性

类似于content-origin的属性值

有padding-box（默认）、border-box、content-box；

设置图片的显示范围，就像被裁剪了一样

.demo {
    width: 600px;
    height: 200px;
    border: 20px solid transparent;
    padding: 20px;
    background: url('1.png') no-repeat,
                url('2.png') no-repeat 200px 0,
                url('3.png') 400px 0;
    background-origin: content-box;
    background-clip: content-box/*增*/;
}

这样，图片中多余的部分就不会被看见了。

我们的webkit中图片裁剪属性还有一个特殊的属性值是text

这意味着背景图像仅限于文本

配合text-fill-color可以产生独特的描边文字效果css3 背景图片，我们来看看

<div class="demo">某科学的超电磁炮</div>  <--添加内容

.demo {
    width: 600px;
    height: 200px;
    border: 20px solid transparent;
    padding: 20px;
    background: url('1.png') no-repeat,
                url('2.png') no-repeat 200px 0,
                url('3.png') 400px 0;
    background-origin: content-box;
    -webkit-background-clip: text;/*增*/
    -webkit-text-fill-color: transparent;/*增*/
    font: 75px/200px bold;/*增*/
}

#图片规格background-size#

回到我们的一张照片

背景大小属性允许我们控制图像的大小

例如写入两个像素值来控制宽度和高度

.demo {/*新*/
    width: 600px;
    height: 200px;
    border: 1px solid black;
    background: url('1.png') no-repeat;
    background-size: 180px 140px;
}

写入像素值意味着宽度和高度像素相同

当然也可以写成百分比

另外还有两个关键字：cover和contain

cover 是覆盖整个区域，在我们的例子中长度将是完整的

.demo {
    width: 600px;
    height: 200px;
    border: 1px solid black;
    background: url('1.png') no-repeat;
    background-size: cover/*改*/;
}

contains是为了保证图片在区域内显示到最大，在我们的例子中高度会是满的

.demo {
    width: 600px;
    height: 200px;
    border: 1px solid black;
    background: url('1.png') no-repeat;
    background-size: contain;
}

CSS3背景图片的内容是这样的

主页门户