CSS怎么将超出的文本隐藏并用省略号代替

今天小编给大家分享一下CSS怎么将超出的文本隐藏并用省略号代替的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

目前成都创新互联公司已为上千的企业提供了网站建设、域名、网站空间、成都网站托管、企业网站设计、淮北网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

在CSS中文本超出可以使用overflow：hidden来隐藏以及CSS中的text-overflow属性给隐藏部分添加省略号

经常在写页面的时候会碰到文字内容太多超过盒子内容对于这种情况我们会常常用overflow：hidden来隐藏，但是今天就要告诉大家一个新的小知识点，我们可以用它将超出部分的文章隐藏，并用省略号代替，接下来将在文章中具体和大家介绍

html代码

width:300px;

height:30px;

border:1pxsolid#ccc;

text-align:center;

font-size:12px;

line-height:30px;

}

</style>

</head>

<body>

<p>php中文网提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!

php从入门到精通,一站式php自学平台!</p>

Image18.jpg

text-overflow属性

规定当文本溢出包含元素时发生的事情，它是CSS3中的属性，它有三个值分别为

clip:修剪文本，将超出部分删除

text-overflow:clip;

overflow:hidden;

white-space:nowrap;规定段落中的文本不进行换行

Image16.jpg

ellipsis:用省略号来代替被删除的内容

text-overflow:ellipsis;

overflow:hidden;

white-space:nowrap;

以上就是“CSS怎么将超出的文本隐藏并用省略号代替”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容