css之overflow:hidden对于溢出到padding的内容不隐藏

最新推荐文章于 2024-05-01 12:01:29 发布

老君-hjs

最新推荐文章于 2024-05-01 12:01:29 发布

阅读量4.9k

点赞数 5

分类专栏： css 文章标签： css html5

本文链接：https://blog.csdn.net/qq_43072786/article/details/120495774

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

盒子模型的内容区域其实包括content+padding，即padding box，虽然正常情况下元素只在content内排布，但是当内容溢出到padding也是允许的，故overflow:hidden对此不做影响。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.padding {
			display: inline-block;
			width: 350px;
			padding: 30px;
			word-break: break-all;
			text-overflow: ellipsis;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		</style>
	</head>
	<body>
		<div class="padding">
			我们是努力成长的程序员，但是也要注意身体，多多锻炼呀！
			以后每天记录一些遇到的问题，如果有不对的地方请多多指教，谢谢大家~
		</div>
	</body>
</html>

如何隐藏溢出到padding的内容？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.padding {
			display: inline-block;
			width: 350px;
			padding: 30px;
		}
		.padding > p {
			word-break: break-all;
			text-overflow: ellipsis;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		</style>
	</head>
	<body>
		<div class="padding">
			<p>
				我们是努力成长的程序员，但是也要注意身体，多多锻炼呀！
				以后每天记录一些遇到的问题，如果有不对的地方请多多指教，谢谢大家~
			</p>
		</div>
	</body>
</html>

老君-hjs

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
6
评论
css之overflow:hidden对于溢出到padding的内容不隐藏

盒子模型的内容区域其实包括content+padding，即padding box，虽然正常情况下元素只在content内排布，但是当内容溢出到padding也是允许的，故overflow:hidden对此不做影响。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .padding ...
复制链接

扫一扫