本文摘自PHP中文网,作者V,侵删。
css实现内容超出隐藏效果的方法是,给文本内容添加text-overflow属性,例如【text-overflow:ellipsis】。text-overflow属性指定当文本溢出包含它的元素应该发生什么。

本文操作环境:windows10系统、css 3、thinkpad t480电脑。
css为我们提供了一个很适合的元素text-overflow,这个属性指定当文本溢出包含它的元素,应该发生什么。
语法:
1 | text-overflow: clip|ellipsis|string;
|
属性值:
举个例子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title ></ title >
< style >
div.test
{
white-space:nowrap;
width:12em;
overflow:hidden;
border:1px solid #000000;
}
</ style >
</ head >
< body >
< p >以下 div 容器内的文本无法完全显示,可以看到它被裁剪了。</ p >
< p >div 使用 "text-overflow:ellipsis":</ p >
< div class = "test" style = "text-overflow:ellipsis;" >This is some long text that will not fit in the box</ div >
< p >div 使用 "text-overflow:clip":</ p >
< div class = "test" style = "text-overflow:clip;" >This is some long text that will not fit in the box</ div >
< p >div 使用自定义字符串 "text-overflow: >>"(只在 Firefox 浏览器下有效):</ p >
< div class = "test" style="text-overflow:'>>';">This is some long text that will not fit in the box</ div >
</ body >
</ html >
|
展示效果:

相关视频分享:css视频教程
以上就是css怎么实现内容超出隐藏效果的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
用css制作立体导航栏的方法
如何选择web前端模板引擎(推荐)
把css放在html的哪里
jquery实现带弹窗和次数的转盘抽奖(代码)
一分钟了解css的主要功能
css order属性怎么用
css中的“>”是什么意思
canvas实现压缩图片的代码示例
css怎么排除第一个子元素
css如何实现滑动门效果
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css怎么实现内容超出隐藏效果