详解：32text-overflow各种值

最新推荐文章于 2023-02-23 16:54:26 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2023-02-23 16:54:26 发布

阅读量683

点赞数 2

分类专栏： CSS3最详解

本文链接：https://blog.csdn.net/qq_37805832/article/details/105837817

版权

CSS3最详解专栏收录该内容

54 篇文章 1 订阅

订阅专栏

核心知识点;第一个classbox1我不讲你也懂是吧
那第二个呢？他是what？overflow:hidden;它代表超过我们所定义的宽高就会超过的部分会被裁剪。
第三个呢？

若为text-overflow:clip 简单的裁切
若为text-overflow:ellipsis 当对象内文本溢出时（超过宽高时）显示省略标记(…) ，我的理解是裁剪然后用。。。代替超过的部分
最后说一句，不要嫌我啰嗦，就是写这种的时候记得用边框solid啊，为什么，好看一点
white-space: nowrap;规定段落中的文本不进行换行：你想一想，结合起来使用的哈
这里有一个优点就是只写width不写height哦哈哈哈

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>text-overflow</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css"/>
	<style type="text/css">
		div{
			margin:50px;
		}
		.box1{
			width: 100px;
			border:1px solid red;
		}
		.box2{
			width: 100px;
			height: 100px;
			border:1px solid blue;
			overflow:hidden;
		}
		.box3{
			width: 100px;
			border:1px solid green;
			white-space: nowrap;
			overflow:hidden;
			text-overflow: clip;
			text-overflow: ellipsis;
		}
	</style>
</head>
<body>
<div class="box1">当文本超出容器大小的时候，我们可以同设置text-overflow如何处理，是否显示...省略标记,this is a test</div>
<div class="box2">当文本超出容器大小的时候，我们可以同设置text-overflow如何处理，是否显示...省略标记,this is a test</div>
<div class="box3">当文本超出容器大小的时候，我们可以同设置text-overflow如何处理，是否显示...省略标记,this is a test</div>
</body>
</html>

在这里插入图片描述

贵哥的编程之路(热爱分享)

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
详解：32text-overflow各种值

核心知识点;第一个classbox1我不讲你也懂是吧那第二个呢？他是what？overflow:hidden;它代表超过我们所定义的宽高就会超过的部分会被裁剪。第三个呢？若为text-overflow:clip 简单的裁切若为text-overflow:ellipsis 当对象内文本溢出时（超过宽高时）显示省略标记(…) ，我的理解是裁剪然后用。。。代替超过的部分最后说一句，不要嫌...
复制链接

扫一扫