CSS 文字太多用省略号表示

最新推荐文章于 2024-10-29 16:03:57 发布

weixin_34223655

最新推荐文章于 2024-10-29 16:03:57 发布

阅读量134

点赞数

CC 4.0 BY-SA版权

文章标签：测试

原文链接：http://www.cnblogs.com/Eeexiang/p/10173101.html

本文介绍如何使用CSS样式使超出容器的文本以省略号(...)形式显示，包括设置文本宽度、隐藏溢出部分及使用省略号替代。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

width:150px;/*要显示文字的宽度*/
overflow:hidden; /*超出的部分隐藏起来。*/ 
white-space:nowrap;/*不显示的地方用省略号...代替*/
text-overflow:ellipsis;/* 支持 IE */

<html>
<head>
<style type="text/css">
div
{
width:250px;/*要显示文字的宽度*/
overflow:hidden; /*超出的部分隐藏起来。*/ 
white-space:nowrap;/*不显示的地方用省略号...代替*/
text-overflow:ellipsis;/* 支持 IE */
}
</style>
</head>
<body>
<div>
这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
</div>
</body>
</html>