核心知识点;第一个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>
原创文章 107
获赞 14
访问量 1343