文字或文本超出显示省略号
1. 超出一行隐藏:
-
第一步:给文本设置固定宽度
-
第二步:给文本设置以下属性
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul>li span {
display: block;
}
li{
list-style: none;
border: 1px solid #00FFFF;
width: 100px;
}
</style>
</head>
<body>
<div class="container" style="background-color: #d6ebde;width: 500px;margin: auto;height: 300px;">
<ul style="display: flex;justify-content: space-between;">
<Li><img src="img/code.png"/><span>标题</span><span>这是第一行的内容,但是太多了我想隐藏掉</span></Li>
<Li><img src="img/code.png"/><span>标题</span><span>内容内容内容内容内容内容</span></Li>
<Li><img src="img/code.png"/><span>标题</span><span>内容内容内容内容内容内容</span></Li>
<Li><img src="img/code.png"/><span>标题</span><span>内容内容内容内容内容内容</span></Li>
<Li><img src="img/code.png"/><span>标题</span><span>内容内容内容内容内容内容</span></Li>
</ul>
</div>
</body>
</html>
显示效果:
更改代码:添加
1.设置固定宽度
2.设置以下属性
overflow: hidden;//超出文本隐藏
text-overflow: ellipsis;//溢出用省略号显示
white-space: nowrap;//溢出不换行
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul>li span {
display: block;
}
li {
list-style: none;
border: 1px solid #00FFFF;
width: 100px;
}
</style>
</head>
<body>
<div class="container" style="background-color: #d6ebde;width: 500px;margin: auto;height: 300px;">
<ul style="display: flex;justify-content: space-between;">
<Li><img src="img/code.png" /><span>标题</span>
<span style="width: 50px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: inline-block;
background: yellow;">这是第一行的内容,但是太多了我想隐藏掉</span></Li>
<Li><img src="img/code.png" /><span>标题</span><span>内容内容内容内容内容内容</span></Li>
<Li><img src="img/code.png" /><span>标题</span><span>内容内容内容内容内容内容</span></Li>
<Li><img src="img/code.png" /><span>标题</span><span>内容内容内容内容内容内容</span></Li>
<Li><img src="img/code.png" /><span>标题</span><span>内容内容内容内容内容内容</span></Li>
</ul>
</div>
</body>
</html>
显示效果:
2. 超出两行隐藏:
【有时候一行不是很好看,尤其是内容,可能标题需要一行超出隐藏,但是内容两行会好看一点,话不多说,上代码】
超出两行隐藏:
注意:-webkit是谷歌内核专用哈,其他浏览器不可
1.overflow: hidden;//超出文本隐藏
text-overflow: ellipsis;//溢出用省略号显示
2.
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //从上到下垂直排列子元素
(设置伸缩盒子的子元素排列方式)
-webkit-line-clamp:2; //这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数。
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul>li span {
display: block;
}
li {
list-style: none;
border: 1px solid #00FFFF;
width: 100px;
}
</style>
</head>
<body>
<div class="container" style="background-color: #d6ebde;width: 500px;margin: auto;height: 300px;">
<ul style="display: flex;justify-content: space-between;">
<Li><img src="img/code.png" /><span>标题</span>
<span style="width: 50px;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
background: yellow;
-webkit-line-clamp: 2;
display: -webkit-box;
}">这是第一行的内容,但是太多了我想隐藏掉</span></Li>
<Li><img src="img/code.png" /><span>标题</span><span>内容内容内容内容内容内容</span></Li>
<Li><img src="img/code.png" /><span>标题</span><span>内容内容内容内容内容内容</span></Li>
<Li><img src="img/code.png" /><span>标题</span><span>内容内容内容内容内容内容</span></Li>
<Li><img src="img/code.png" /><span>标题</span><span>内容内容内容内容内容内容</span></Li>
</ul>
</div>
</body>
</html>
显示效果: