本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。
方法:首先使用“overflow:hidden”语句,设置内容超出后隐藏;然后使用“text-overflow:ellipsis”语句,设置内容超出显示为省略号;最后使用“white-space:nowrap”语句,设置文本不进行换行即可。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
新建一个html页面,在html代码页面找到<body>标签,在<body>标签里创建一个<p>标签,然后输入显示的内容并添加一个class类为 class="cont"。找到<title>标签,在这个标签下面创建一个<style>标签,在<style>标签里设置class为cont的样式内容超出后为隐藏。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
保存好代码,使用浏览器打开html文件查看效果,发现内容并没有隐藏,原因是没有设置内容的高度。
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者