css 超出长度显示省略号 text-overflow: ellipsis;

ゝ一世哀愁。 2021-09-23 22:58 446阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css"> .cla1{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 50px; } .inline-block{ display: inline-block; } .block{ display: block; } </style>
    	</head>
    	<body>
    		<span class="cla1">span, no ellipsis</span>
    		<br />
    		<span class="cla1 inline-block">inline-block ok</span>
    		<span class="cla1 block">block okokokok</span>
    		<p class="cla1">p, default is block</p>
    		<table>
    			<tbody>
    				<tr><td class="cla1">table-cell</td></tr>
    			</tbody>
    		</table>
    		
    		<table>
    			<tbody>
    				<tr><td class="cla1 block">table's block, ok</td></tr>
    			</tbody>
    		</table>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70]  
解释：  
`overflow: hidden;` 禁止滚动条  
`white-space: nowrap;` 不换行  
`text-overflow: ellipsis;` 超出长度部分以省略号显示  
`width: 50px;` 设置长度

需要注意的是，`text-overflow: ellipsis;`对元素的display属性有要求，需要为block或者inline-block。span标签的默认值为inline，td的为table-cell，需要改为block或者inline-block。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70]: /images/20210923/f72618c3e1194d99ac9c6530e2826399.png

发表评论取消回复

表情：

评论列表（有 0 条评论，446人围观）

还没有评论，来说两句吧...

相关阅读

相关 css实现超出部分显示省略号

/\ 显示一行，省略号 \/ white-space: nowrap; text-overflow: ellipsis; overflow:

小咪咪/ 2023年07月19日 08:14/ 0 赞/ 2 阅读

相关 css文字超出一行就显示省略号

1，css超出一行用点表示 white-space:nowrap; overflow:hidden; text-overflow:

水深无声/ 2022年12月27日 04:56/ 0 赞/ 259 阅读

相关 css实现内容超出显示省略号

1.多行超出显示省略号 display: -webkit-box; -webkit-box-orient: vertical; -webkit-lin

港控/mmm°/ 2022年12月11日 02:25/ 0 赞/ 240 阅读

相关 CSS设置div超出文本显示省略号

.xx{ overflow: hidden; text-overflow: ellipsis; white-space:

偏执的太偏执、/ 2022年11月14日 14:46/ 0 赞/ 239 阅读

相关 CSS设置超出几行显示省略号

overflow: hidden; text-overflow: ellipsis; display: -webkit-box; \-webkit-line

水深无声/ 2022年09月15日 13:57/ 0 赞/ 238 阅读

相关 html + CSS实现文字超出长度隐藏,显示省略号

表格： table\{ 　　table-layout: fixed; \} \} t td\{ 　 white-space: nowrap;

﹏ヽ暗。殇╰゛Y/ 2022年08月06日 07:21/ 0 赞/ 258 阅读

相关 css控制超出一行内容显示省略号

前言：在前端开发过程中，经常会遇到文字超过一行内容的情况，要求隐藏超出部分并且以省略号显示。解决方法：使用以下css代码即可解决这个需求： whi

矫情吗；*/ 2022年05月17日 12:21/ 0 赞/ 513 阅读

相关 css 文字超出部分显示省略号

设置table固定布局，否则自适应布局会不受控制 table{ 　　table-layout: fixed; } 单行文字：

朱雀/ 2022年04月13日 14:55/ 0 赞/ 393 阅读

相关 CSS文本超出两行显示显示省略号

html <div class="text">超出两行显示省略号</div> css .text{ display: -webkit-b

深藏阁楼爱情的钟/ 2022年03月26日 15:14/ 0 赞/ 559 阅读

相关 css 超出长度显示省略号 text-overflow: ellipsis;

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

ゝ一世哀愁。/ 2021年09月23日 22:58/ 0 赞/ 447 阅读