首页 > 文章 > web前端 > css如何设置文字超出省略号

css如何设置文字超出省略号

醉折花枝作酒筹原创: 2021-04-20 14:12:0015928浏览

方法：首先使用“overflow:hidden”语句，设置内容超出后隐藏；然后使用“text-overflow:ellipsis”语句，设置内容超出显示为省略号；最后使用“white-space:nowrap”语句，设置文本不进行换行即可。

css如何设置文字超出省略号

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

新建一个html页面，在html代码页面找到6c04bd5ca3fcae76e30b72ad730ca86d标签，在6c04bd5ca3fcae76e30b72ad730ca86d标签里创建一个e388a4556c0f65e1904146cc1a846bee标签，然后输入显示的内容并添加一个class类为 class="cont"。找到b2386ffb911b14667cb8f0f91ea547a7标签，在这个标签下面创建一个c9ccee2e6ea535a969eb3f532ad9fe89标签，在c9ccee2e6ea535a969eb3f532ad9fe89标签里设置class为cont的样式内容超出后为隐藏。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>document</title> 
<style>
.cont{
    overflow:hidden;/*内容超出后隐藏*/
}
</style>
</head>
<body>
<p class="cont">
    订单的的顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶</p>
</body>
</html>

保存好代码，使用浏览器打开html文件查看效果，发现内容并没有隐藏，原因是没有设置内容的高度。

设置内容显示为一行，内容超出后显示为省略号。为cont类添加内容显示为一行：white-space: nowrap; ，内容超出后显示为省略号：text-overflow: ellipsis; （注意：white-space: nowrap;和text-overflow: ellipsis;要同时使用才能显示为省略号）。

<style>
.cont{
    overflow:hidden;/*内容超出后隐藏*/
    text-overflow: ellipsis;/* 超出内容显示为省略号 */
    white-space: nowrap;/* 文本不进行换行 */
}
</style>

保存好代码后使用浏览器打开查看内容超出后显示为省略号的效果。

JNH]`0L31W`(P5KE1_RW26U.png

推荐学习：css视频教程

以上是css如何设置文字超出省略号的详细内容。更多信息请关注PHP中文网其他相关文章！

html5 css css3 html class overflow

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：css如何设置图片位置下一篇：css如何设置最小高度

查看更多