方法：首先使用“overflow:hidden”语句，设置内容超出后隐藏；然后使用“text-overflow:ellipsis”语句，设置内容超出显示为省略号；最后使用“white-space:nowrap”语句，设置文本不进行换行即可。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
新建一个html页面，在html代码页面找到
标签，在标签里创建一个
标签，然后输入显示的内容并添加一个class类为 class="cont"。找到
标签，在这个标签下面创建一个<style>标签，在<style>标签里设置class为cont的样式内容超出后为隐藏。<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">登录后复制</div></div><p>保存好代码，使用浏览器打开html文件查看效果，发现内容并没有隐藏，原因是没有设置内容的高度。<p><img src="https://img.php.cn/upload/image/568/666/863/1618897643717434.png" title="1618897643717434.png" alt="K5B3NY7633ILKEIZX60YS2W.png"/><p><span>立即学习“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="max-width:90%" rel="nofollow" target="_blank">前端免费学习笔记（深入）”；<p>设置内容显示为一行，内容超出后显示为省略号。为cont类添加内容显示为一行：white-space: nowrap; ，内容超出后显示为省略号：text-overflow: ellipsis; （注意：white-space: nowrap;和text-overflow: ellipsis;要同时使用才能显示为省略号）。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><style>
.cont{
overflow:hidden;/*内容超出后隐藏*/
text-overflow: ellipsis;/* 超出内容显示为省略号 */
white-space: nowrap;/* 文本不进行换行 */
}
</style></pre><div class="contentsignin">登录后复制</div></div><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">css视频教程</style>
以上就是css如何设置文字超出省略号的详细内容，更多请关注php中文网其它相关文章！
178
收藏
