css处理文字的几种特殊效果

最新推荐文章于 2024-05-20 08:00:13 发布

凌渊阁

最新推荐文章于 2024-05-20 08:00:13 发布

阅读量251

点赞数

分类专栏： html

本文链接：https://blog.youkuaiyun.com/zw3413/article/details/102545014

版权

html 专栏收录该内容

2 篇文章

订阅专栏

1.自定义选中文本颜色和背景色

![在这里插入图片描述](https://img-blog.csdnimg.cn/20191222165901145.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3MzQxMw==,size_16,color_FFFFFF,t_70)

2.多行溢出效果

![在这里插入图片描述](https://img-blog.csdnimg.cn/20191222165920577.png)

3.单行溢出效果

![在这里插入图片描述](https://img-blog.csdnimg.cn/20191222170016285.png)

4.水平从右到左排列

![在这里插入图片描述](https://img-blog.csdnimg.cn/20191222165935607.png)

5.文字两侧对齐

![在这里插入图片描述](https://img-blog.csdnimg.cn/20191222170002573.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3MzQxMw==,size_16,color_FFFFFF,t_70)

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			::selection{
				background-color:#f13f84;
				color:#fff;
			}
			.select-color{
				line-height:30px;
				font-weight:bold;
				font-size:30px;
				color:#d60f5c
			}
			.special::selection{
				background-color:#00b7a3;
			}
			
			.ellipsis-multiline{
				width:400px;
				display:-webkit-box;
				-webkit-line-clamp:2;
				/*autoprefixer:off*/
				-webkit-box-orient:vertical;
				/*autoprefixer:on*/
				overflow:hidden;
				text-overflow:ellipsis;
			}
			.ellipsis{
				width:200px;
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
			}
			.reverse-text{
				width:200px;
				font-weight:bold;
				color:#f13f84;
				font-size:30px;
				letter-spacing:-70px;
				//left:200px;
				//position:absolute;
			}
			.justify-text{
				text-align-last:justify;
				width:150px;
				writing-mode:sideways-rl;
			}
		</style>
	</head>
	<body>
		
		<!-- 自定义选中文本颜色和背景色-->
		<div class="select-color">
			<p>红豆生南国,</p>
			<p class="special">春来发几枝</p>
			<p>愿君多采撷</p>
			<p class="special">此物最相思</p>
		</div>
		
		<!-- 多行溢出效果 -->
		<div class="ellipsis-multiline">
			寻寻觅觅，冷冷清清，凄凄惨惨戚戚。咋暖还寒时候，最难将息。
			三杯两盏淡酒，怎敌他、晚来风急！雁过也，正伤心，缺是旧时相识。
			满地黄花堆积，憔悴损，如今有谁堪摘？守着窗儿，独自怎生得黑！
			梧桐更兼细雨，到黄昏、点点滴滴。这次第，怎一个愁字了得。
		</div>
		
		<!-- 单行溢出效果 -->
		<div class="ellipsis">
			昨夜雨疏风骤，浓睡不消残酒。试问卷帘人，却道海棠依旧。知否，知否，应是绿肥红瘦。
		</div>
		
		<!-- 水平从右到左排列 -->
		<div class="reverse-text">
			红豆生南国，<br/>
			春来发几枝。<br/>
			愿君多采撷，<br/>
			此物最相思。
		</div>
		
		<!-- 文字两侧对齐 -->
		<div class="justify-text">
			<ul>
				<li>账号</li>
				<li>密码</li>
				<li>手机号</li>
				<li>电子邮件</li>
				<li>新家庭住址</li>
			</ul>
		</div>
	</body>
</html>