text-overflow

最新推荐文章于 2024-04-26 09:18:36 发布

小青龙8085

最新推荐文章于 2024-04-26 09:18:36 发布

阅读量605

点赞数 1

分类专栏：寒假前端

本文链接：https://blog.csdn.net/lbs311709000127/article/details/104087960

版权

寒假前端专栏收录该内容

28 篇文章 2 订阅

订阅专栏

text-overflow

定义和用法

text-overflow 属性规定当文本溢出包含元素时发生的事情。

语法

text-overflow: clip|ellipsis|string;

值	描述
clip	修剪文本，直接减去多余的文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。

注意：在使用这个属性的时候要加上overflow：hidden

案例效果：当鼠标移到文字框中的时候，文字框显示原来的省略之前的内容

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}"/>
		<title></title>
		<style type="text/css">
			div{
				overflow: hidden;
				white-space: nowrap;
				text-overflow: clip;
				width: 12em;
				border: 1px red solid;
			}
			div:nth-child(2){
				margin-top: 10px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				width: 12em;
				border: 1px red solid;
			}
			div:hover{
				overflow: visible;
				white-space: normal;
				text-overflow:inherit;
			}
		</style>
	</head>
	<body>
		<div>
			does not consist in gazing at each other, but in looking outward together in the same direction
			but also the stars at night.爱不是彼此凝视，而是一起注视着同一个方向。只有很少的人才懂得，
			人生是因为缺憾而美丽，而所谓的回头，只不过是丢掉了白天的太阳的之后，又错过了夜晚的星星。
		</div>
		<div>
			does not consist in gazing at each other, but in looking outward together in the same direction
			but also the stars at night.爱不是彼此凝视，而是一起注视着同一个方向。只有很少的人才懂得，
			人生是因为缺憾而美丽，而所谓的回头，只不过是丢掉了白天的太阳的之后，又错过了夜晚的星星。
		</div>
	</body>
</html>

小青龙8085

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
text-overflow

text-overflow定义和用法text-overflow 属性规定当文本溢出包含元素时发生的事情。语法text-overflow: clip|ellipsis|string;值描述 clip 修剪文本，直接减去多余的文本。 ellipsis 显示省略符号来代表被修剪的文本。 string 使用给定的字符串来代表被修剪的文本。注...
复制链接

扫一扫