css如何设置文字超出省略号
-
醉折花枝作酒筹
原创
-
2021-04-20 14:12:00
15625浏览
方法：首先使用“overflow:hidden”语句，设置内容超出后隐藏；然后使用“text-overflow:ellipsis”语句，设置内容超出显示为省略号；最后使用“white-space:nowrap”语句，设置文本不进行换行即可。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
新建一个html页面，在html代码页面找到
标签，在标签里创建一个
标签，然后输入显示的内容并添加一个class类为 class="cont"。找到
标签，在这个标签下面创建一个<style>标签，在<style>标签里设置class为cont的样式内容超出后为隐藏。<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<style>
.cont{
overflow:hidden;/*内容超出后隐藏*/
}
</style>
</head>
<body>
<p class="cont">
订单的的顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶</p>
</body>
</html></pre><p>保存好代码，使用浏览器打开html文件查看效果，发现内容并没有隐藏，原因是没有设置内容的高度。<p><img src="https://img.php.cn/upload/image/568/666/863/1618897643717434.png" title="1618897643717434.png" alt="K5B3NY7633ILKEIZX60YS2W.png"/><p>设置内容显示为一行，内容超出后显示为省略号。为cont类添加内容显示为一行：white-space: nowrap; ，内容超出后显示为省略号：text-overflow: ellipsis; （注意：white-space: nowrap;和text-overflow: ellipsis;要同时使用才能显示为省略号）。<pre class="brush:js;toolbar:false"><style>
.cont{
overflow:hidden;/*内容超出后隐藏*/
text-overflow: ellipsis;/* 超出内容显示为省略号 */
white-space: nowrap;/* 文本不进行换行 */
}
</style></pre><p>保存好代码后使用浏览器打开查看内容超出后显示为省略号的效果。<p><img src="https://img.php.cn/upload/image/183/356/670/1618897808567717.png" title="1618897808567717.png" alt="JNH]`0L31W`(P5KE1_RW26U.png"/><p>推荐学习：<a href="https://www.php.cn/course/list/12.html" target="_blank"><a style="max-width:90%" href="https://m.php.cn/zt/15716.html" target="_blank">css视频教程</style>
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
