html文本超出隐藏
程序员文章站
2022-04-22 13:45:43
...
html中有时候需要超出文本进行隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
//单行样式
.my {
width: 100px;
overflow: hidden;
//超出之后，显示的形式，这儿是省略号
text-overflow: ellipsis;
//不换行
white-space: nowrap;
}
//多行样式
.my1 {
width: 100px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
//这个是设置第四行的时候超出进行隐藏
-webkit-line-clamp: 4;
}
</style>
</head>
<body>
//单行
<div class="my">单行隐藏单行隐藏单行隐藏单行隐藏单行隐藏单行隐藏单行隐藏</div>
//多行
<div class="my1">当文字超过范围的时候，超出部分会隐藏起来。可以设置第几行开始隐藏。多行隐藏多行隐藏多行隐藏多行隐藏多行隐藏多行隐藏多行隐藏多行隐藏多行隐藏</div>
</body>
</html>
上一篇： 速冻,这波段子冷滴很呀!