您的位置：首页 > Web前端 > CSS

css溢出文本处理的几种方法

2017-10-27 09:19 363 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.div1 {
height: 100px;
width: 100px;
border: 1px solid gray;
overflow: hidden;
text-overflow: clip;
/ / 不显示省略标记，而是简单的裁剪
}

.div2 {
height: 100px;
width: 100px;
border: 1px solid gray;

4000
overflow: hidden;
text-overflow: ellipsis;
/ / 超出部分以省略号的方式显示，省略号插入的位置是最后一个字符
}

.div3 {
height: 100px;
width: 100px;
border: 1px solid gray;
overflow: hidden;
white-space: nowrap;
/ / 表示强制在同一行显示
}

.div4 {
height: 100px;
width: 100px;
border: 1px solid gray;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/ / 让文本在同一行显示超出部分显示省略号
}
</style>
<body>
<div class="div1">
lalalalalalalalallalalalala
</div>
<div class="div2">
lalalalalalalalallalalalala
</div>
<div class="div3">
lalalalalalalalallalalalala
</div>
<div class="div4">
lalalalalalalalallalalalala
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航