css如何设置一行字显示不完隐藏_CSS

上一篇: CSS外链式与内联式的区别是什么下一篇:css怎么控制按钮不可用

css如何设置一行字显示不完隐藏

发布时间：2022-05-17 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了css如何设置一行字显示不完隐藏，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

css中可利用overflow属性来设置一行字显示不完就隐藏；只需给文字的盒子元素添加“overflow:hidden;”样式，设置当内容溢出元素框时，将文字内容修剪，且溢出部分不可见即可。

css如何设置一行字显示不完隐藏

本教程操作环境：windows7系统、css3&&html5版、Dell G3电脑。

（学习视频分享：css视频教程）

在css中，可以通过“overflow:hidden;”样式来设置。

代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style>
			div{
				width: 200px;
				border: 1px solid red;
				white-space: nowrap;
			}
			.gdou {
				
				background: pink;
				text-overflow: ellipsis;
				overflow: hidden;
				
			}
		</style>
	</head>

	<body>
		<div>
			这一行很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的。
		</div><br />
		<div class='gdou'>
			这一行很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的。
		</div>
	</body>

</html>

效果图：

css如何设置一行字显示不完隐藏

说明：overflow属性

overflow属性规定当内容溢出元素框时发生的事情。

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

当overflow属性的值设置为“hidden”时，内容会被修剪，并且其余内容是不可见的。

更多编程相关知识，请访问：编程视频！！

以上就是css如何设置一行字显示不完隐藏的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的css如何设置一行字显示不完隐藏全部内容，希望文章能够帮你解决css如何设置一行字显示不完隐藏所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：

上一篇: CSS外链式与内联式的区别是什么下一篇:css怎么控制按钮不可用

猜你在找的CSS相关文章