![css基础教程：[1]为网页使用网络字体](https://exp-picture.cdn.bcebos.com/cca2552c56ee7b7f34c65fc66ef4fcf5ef0d411f.jpg)
css基础教程：[1]为网页使用网络字体,本教程为大家介绍在网页上怎么使用网络字体。1，使用网络字体的好处是所有人看到的效果都是样的，效果统一，2，不依赖于用户电脑上是否安装了该字体。......
2023-03-16 328 CSS
css设置内容超出后显示省略号
来源：互联网
2023-03-16 19:17:34 版权归原作者所有，如有侵权，请联系我们
制作前端页面时，在一些标题、简介等需要给用户看到一内容，当内容超过一个范围后就会把内容隐藏并显示省略号给用户提示。
制作思路：
1.使用overflow: hidden把超出的内容进行隐藏；
2.然后使用white-space: nowrap设置内容不换行；
3.最后使用text-overflow: ellipsis设置超出内容为省略号
方法/步骤
新建一个html页面。如图：
在html代码页面找到body>标签，在body>标签里创建一个标签，然后输入显示的内容并添加一个class类为 class="cont"。如图：
找到title>标签，在这个标签下面创建一个style>标签，在style>标签里设置class为cont的样式内容超出后为隐藏
style>
.cont{
overflow: hidden;/*内容超出后隐藏*/
}
/style>
保存好代码，使用浏览器打开html文件查看效果，发现内容并没有隐藏，原因是没有设置内容的高度。如图：
设置内容显示为一行，内容超出后显示为省略号。为cont类添加内容显示为一行：white-space: nowrap; ，内容超出后显示为省略号：text-overflow: ellipsis; （注意：white-space: nowrap;和text-overflow: ellipsis;要同时使用才能显示为省略号）。
保存好代码后使用浏览器打开查看内容超出后显示为省略号的效果。如图：
代码。把代码复制到新建的html页面即可实现内容超出后显示为省略号。
代码：
!DOCTYPE html>
html>
head>
meta charset="UTF-8">
title>内容超出显示省略号/title>
style>
.cont{
overflow: hidden;/*内容超出后隐藏*/
text-overflow: ellipsis;/* 超出内容显示为省略号*/
white-space: nowrap;/*文本不进行换行*/
}
/style>
/head>
body>
订单的的顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶
/
/body>
/html>
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： CSS
上一篇：如何建一个简单的css样式 下一篇：设置css样式的多种方法
相关文章
- 详细阅读
-
怎么用div布局加css样式做网页详细阅读
怎么用div布局加css样式做网页,怎么做一个网页呢，静态页面的制作是很简单的，我们来看看怎么通过div布局 c样式来制作一个网页吧。......
2023-03-16 479 CSS
- 详细阅读
