文字/文本超出显示省略号

最新推荐文章于 2024-05-11 17:05:39 发布

猫儿念你

最新推荐文章于 2024-05-11 17:05:39 发布

阅读量517

点赞数 1

分类专栏：前端学习-原创文章标签： css html

本文链接：https://blog.csdn.net/qq_35779070/article/details/106740245

版权

前端学习-原创专栏收录该内容

35 篇文章 0 订阅

订阅专栏

文字或文本超出显示省略号

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>

显示效果：
二行省略效果

猫儿念你

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文字/文本超出显示省略号

文字或文本超出显示省略号1. 超出一行隐藏：第一步：给文本设置固定宽度第二步：给文本设置以下属性<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } ul>li span { d
复制链接

扫一扫

专栏目录