text-overflow:ellipsis实现超出隐藏时省略号显示

text-overflow:ellipsis;要达到的效果是：文字超出容器宽度时，文字被隐藏的文字用省略号代替。所以该属性只能用于块状元素或行内块元素中，对行内元素是不起作用的。

一般和white-space:noworp;(强制文字不换行)，overflow:hidden;(文字溢出隐藏)，一起使用。

eg1:

复制代码
 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>text-overflow</title>
 6     </head>
 7     <style type="text/css">
 8     body,div{margin: 0;padding: 0;}
 9     .text{
10         width: 200px;
11         overflow: hidden;
12         border: 1px solid #c66;
13         white-space: nowrap;
14         text-overflow:ellipsis;
15     }
16     </style>
17     <body>
18         <div class="text">轻舞飞扬轻舞飞扬轻舞飞扬轻舞飞扬轻舞飞扬</div>
19     </body>
20 </html>
复制代码

eg2:

复制代码
 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>text-overflow</title>
 6     </head>
 7     <style type="text/css">
 8     body,span{margin: 0;padding: 0;}
 9     .text{
10         border: 1px solid #c66;
11         padding:5px 10px;
12         display: inline-block;
13         max-width: 200px;
14         overflow: hidden;        
15         white-space: nowrap;
16         text-overflow:ellipsis;
17     }
18     </style>
19     <body>
20         <span class="text">轻舞飞扬轻舞飞扬轻舞飞扬轻舞飞扬轻舞飞扬</span>
21     </body>
22 </html>
复制代码

行内元素要显示省略号，需要先转化成块状元素或行内块元素。

 

posted @   MissBean  阅读(4399)  评论(0)  编辑  收藏  举报
编辑推荐：
· 大模型 Token 究竟是啥：图解大模型Token
· 35岁程序员的中年求职记：四次碰壁后的深度反思
· 继承的思维：从思维模式到架构设计的深度解析
· 如何在 .NET 中 使用 ANTLR4
· 后端思维之高并发处理方案
阅读排行：
· BotSharp + MCP 三步实现智能体开发
· BotSharp 5.0 MCP：迈向更开放的AI Agent框架
· 5. RabbitMQ 消息队列中 Exchanges(交换机) 的详细说明
· 【ESP32】两种模拟 USB 鼠标的方法
· 设计模式脉络
点击右上角即可分享
微信分享提示