方法：首先使用“overflow:hidden”语句，设置内容超出后隐藏；然后使用“text-overflow:ellipsis”语句，设置内容超出显示为省略号；最后使用“white-space:nowrap”语句，设置文本不进行换行即可。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
新建一个html页面，在html代码页面找到
标签，在标签里创建一个标签，然后输入显示的内容并添加一个class类为 class="cont"。找到
标签，在这个标签下面创建一个<style>标签，在<style>标签里设置class为cont的样式内容超出后为隐藏。</p><pre><!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><p><img src="/Uploads/news/d0642f2df69a573565c96640eb483361/1618897643717434.png" title="1618897643717434.png" alt="K5B3NY7633ILKEIZX60YS2W.png"/></p><p>设置内容显示为一行，内容超出后显示为省略号。为cont类添加内容显示为一行：white-space: nowrap; ，内容超出后显示为省略号：text-overflow: ellipsis; （注意：white-space: nowrap;和text-overflow: ellipsis;要同时使用才能显示为省略号）。</p><pre><style>
.cont{
overflow:hidden;/*内容超出后隐藏*/
text-overflow: ellipsis;/* 超出内容显示为省略号 */
white-space: nowrap;/* 文本不进行换行 */
}
</style></pre><p>保存好代码后使用浏览器打开查看内容超出后显示为省略号的效果。</p><p><img src="/Uploads/news/d0642f2df69a573565c96640eb483361/1618897808567717.png" title="1618897808567717.png" alt="JNH]`0L31W`(P5KE1_RW26U.png"/></p><p>推荐学习：<a href="/tag-news-name-css-p-1.html">css</a>视频教程</p><p>以上就是<a href="/tag-news-name-css-p-1.html">css</a>如何设置文字超出省略号的详细内容，更多请关注https://www.sxiaw.com/其它相关文章！</p></span>
</div>
</article>
<aside class="swnetnews">
<div class="lis">
<span><i>前端 热点</i></span>
<ul>
<li><a href="/doc/3183.html" title="PhpStudy安装PHP8【图文详解】" target="_blank">PhpStudy安装PHP8【图文详解】</a></li><li><a href="/doc/7888.html" title="dev c++怎么改成中文" target="_blank">dev c++怎么改成中文</a></li><li><a href="/doc/7913.html" title="C语言中数组所占字节怎么算" target="_blank">C语言中数组所占字节怎么算</a></li><li><a href="/doc/7280.html" title="dev c++怎么用" target="_blank">dev c++怎么用</a></li><li><a href="/doc/10872.html" title="如何使用VSCode配置C语言环境" target="_blank">如何使用VSCode配置C语言环境</a></li><li><a href="/doc/2652.html" title="phpstudy打不开localhost" target="_blank">phpstudy打不开localhost</a></li><li><a href="/doc/4054.html" title="Oracle数据库中的几个主要用户类型" target="_blank">Oracle数据库中的几个主要用户类型</a></li><li><a href="/doc/3248.html" title="如何使用AOP增强Golang方法" target="_blank">如何使用AOP增强Golang方法</a></li><li><a href="/doc/2359.html" title="golang怎么将数据转float" target="_blank">golang怎么将数据转float</a></li><li><a href="/doc/9189.html" title="Python编程中特有的循环语句及其特点" target="_blank">Python编程中特有的循环语句及其特点</a></li><li><a href="/doc/8429.html" title="PHP数据库学习之怎样使用PDO获取查询结果？" target="_blank">PHP数据库学习之怎样使用PDO获取查询结果？</a></li><li><a href="/doc/7889.html" title="一文详解关于php数据过滤" target="_blank">一文详解关于php数据过滤</a></li><li><a href="/doc/789.html" title="如何在Golang中使用YAML注释" target="_blank">如何在Golang中使用YAML注释</a></li><li><a href="/doc/8208.html" title="Node.js 与 Python：哪个适合您的应用程序？" target="_blank">Node.js 与 Python：哪个适合您的应用程序？</a></li><li><a href="/doc/7307.html" title="PHP数组学习之二维数组计算数组长度" target="_blank">PHP数组学习之二维数组计算数组长度</a></li><li><a href="/doc/6122.html" title="PHP最高效率的将一个正整数扩大一千倍" target="_blank">PHP最高效率的将一个正整数扩大一千倍</a></li> </ul>
</div>
</aside>
</main>
<script>
// first, find all the div.code blocks
document.querySelectorAll('pre').forEach(el => {
// then highlight each
hljs.highlightElement(el);
hljs.lineNumbersBlock(el);
});
</script>
<div id="footer">
<div class="w1200">
<p class="tips_text">本网站为非赢利性站点，本网站所有内容均来源于互联网相关站点自动搜索采集信息，相关链接已经注明来源。</p>
<p class="tips_text">Copyright © 2004-2018 https://m.sxiaw.com/. All Rights Reserved.<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?716b3e81948f3acc7a5d3e276a92f5a9";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<a href="http://beian.miit.gov.cn/" target="_blank">津ICP备2023001793号-1</a></p>
</div>
</div>
</body>
</html> 