css文本超出div隐藏剩下内容并显示省略号

最新推荐文章于 2023-09-18 15:09:15 发布

不认输的西瓜

最新推荐文章于 2023-09-18 15:09:15 发布

阅读量581

点赞数

文章标签： css css3 文本超出显示省略号兼容火狐浏览器前端

本文链接：https://blog.csdn.net/qq_40678503/article/details/83856948

版权

单行文本

<style>
    .test {
		width: 300px;
		height: 30px;
		line-height: 30px;
		border: 1px solid black;
		white-space: nowrap;//强制在单行显示
		overflow: hidden;
		text-overflow: ellipsis;//关键
    }
</style> 
<body> 
<div class="test"> 
  <span>这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容</span> 
</div> 
</body>

效果图
在这里插入图片描述
多行文本(火狐没效果)

<style>

	.children-school-content{
		width: 195px;
		font-size: 10px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;   
	}
</style>
<body>
     <div>
        <p class="children-school-content">胡那英据了哈哈很快恢复喝咖啡很简单回复肯定会很深刻的划分空间的喝咖啡和空间的划分哈萨克返回看得见可适当减肥后肯定会发空间哈萨克发动机后方可恢复开放解饿哦就我几个几个了解</p>
    </div>
</body>

效果图：
在这里插入图片描述
兼容火狐写法，使用伪元素。

<style>
	ul {
		width: 300px;
		margin: 40px auto;
		padding: 12px 4px 12px 24px;
		border: 1px solid #eee;
	}
	li { 
		margin: 12px 0;
	}
	li a {
		display: block;
		width: 81px;
		overflow: hidden;/*注意不要写在最后了*/
		white-space: nowrap;
		color: #000;
	}
 
	li:not(p) {
		clear: both;
	}
	li:not(p) a {
		max-width: 170px;
		float: left;
	}
	li:not(p):after {
		content: "...";
		float: left;
		width: 27px;
		padding-left: 5px;
		color: #000;
	}
</style>
</head>
 
<body>
 
<ul>
<li><a href="#">这里是文本内容</a></li>
<li><a href="#">这里是文本内容</a></li>
<li><a href="#">这里是文本内容</a></li>
<li><a href="#">这里是文本内容</a></li>
<li><a href="#">这里是文本内容</a></li>
<li><a href="#">这里是文本内容</a></li>
<li><a href="#">这里是文本内容</a></li>
</ul>
 
</body>

效果图：
在这里插入图片描述

不认输的西瓜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css文本超出div隐藏剩下内容并显示省略号

单行文本&lt;style&gt; .test { width: 300px; height: 30px; line-height: 30px; border: 1px solid black; white-space: nowrap;//强制在单行显示 overflow: hidden; text-overflow: ellipsis;//关键 }...
复制链接

扫一扫