css 文本超出就隐藏并且显示省略号

最新推荐文章于 2025-04-27 16:54:52 发布
最新推荐文章于 2025-04-27 16:54:52 发布
阅读量10w+ 收藏 92
点赞数 69
分类专栏： Css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013868665/article/details/78893158
版权
本文介绍如何使用CSS样式来优雅地处理文本溢出问题，包括单行和多行文本的处理方法。通过简单的几个属性设置，即可实现文本超出部分用省略号表示，保持页面布局整洁。

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







overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行







//上面是一行内容的时候，当有两行的内容时候




overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp:2; //显示的行
















                

        

    

  



    


                



	

		

			

				
					
CSS实现文本超出隐藏并显示省略号效果

				
			

			

				

					CodeVorter的博客
				

				

					09-24
					
					977
					
				

			

		

		

			
				
在网页开发中，经常会遇到需要限制文本长度并在超出部分显示省略号的情况。这种效果可以通过CSS的文本溢出（text-overflow）属性来实现。本文将详细介绍如何使用CSS来实现这种超出隐藏并显示省略号的效果。然后，在CSS样式中，我们定义了这个class的样式规则。属性，我们可以轻松实现文本超出隐藏并显示省略号的效果。请注意，为了使文本超出隐藏效果生效，需要将容器的宽度设置为一个固定的值，例如上述代码中的。你可以根据自己的需要调整容器宽度和文本内容以及样式来实现所需的效果。/* 显示省略号 */

			
		

	



                

            
              



	

		

			

				
					
CSS 文本超出隐藏，并显示省略号

				
			

			

				

					weixin_48596030的博客
				

				

					10-28
					
					3万+
					
				

			

		

		

			
				
CSS 文本超出隐藏，并显示省略号

			
		

	



              


  
              

                


	

		

			

				
					
css文本溢出处理——单行、多行

				
			

			

				

					Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
				

				

					01-02
					
					1万+
					
				

			

		

		

			
				
主要介绍文本溢出时的处理方式及实现单行缩略、多行缩略、展开/收起文本功能。

			
		

	





	

		

			

				
					
CSS中的文本溢出省略

				
			

			

				

					太阳与星辰的博客
				

				

					03-24
					
					1468
					
				

			

		

		

			
				
CSS中的文本溢出省略

			
		

	



		

			
		



	

		

			

				
					
网页开发中超出文字隐藏实现

				
			

			

				

					weixin_43825473的博客
				

				

					12-05
					
					284
					
				

			

		

		

			
				
css实现
width: 300px;/定义块元素的宽度/
        white-space: nowrap;/*内容超宽后禁止换行显示*/

        overflow: hidden;/*超出部分隐藏*/

        text-overflow:ellipsis;/*文字超出部分以省略号显示*/




			
		

	





	

		

			

				
					
css限制显示字数，文字长度超出部分用省略号表示

					
热门推荐

				
			

			

				

					OrangeJuiceMe
				

				

					03-09
					
					8万+
					
				

			

		

		

			
				
为了保证页面的美观整洁，在文字太多的时候，我们常需要隐藏超出长度的文字。在题目，名称，列表条目等地方常用到。
(1).html中文字超出一行，省略超出部分，显示'...'
如果这种情况比较多，可以取一个切合作用的类名用于复用。
.line-limit-length {
overflow: hidden;
text-overflow: ellipsis;
white-space: now

			
		

	





	

		

			

				
					
Css字体溢出显示省略号（实现单行多行显示省略号）

				
			

			

				

					蓝胖子的博客
				

				

					06-21
					
					530
					
				

			

		

		

			
				
Css字体溢出显示省略号（实现单行多行显示省略号）

			
		

	





	

		

			

				
					
css， 文字超出用省略号，包含单行文本省略号，多行文本省略号

				
			

			

				

					lj_1598的博客
				

				

					10-29
					
					6902
					
				

			

		

		

			
				
css， 文字超出用省略号，包含单行文本省略号，多行文本省略号

			
		

	





	

		

			

				
					
文本超出部分显示省略号

				
			

			

				

					JJ_Smilewang的博客
				

				

					04-06
					
					3万+
					
				

			

		

		

			
				
我们经常在网站上可以看到以下样式，标题太长，一行显示不下，则会使用省略号来代替。但是事实上，这个省略号并不是打字打上去的，而是使用代码表示出来的。

今天则主要介绍如何让文本超出部分显示省略号。





1.单行文本超出部分显示省略号

1.1 语法



<style>
   .box {
       width: 400px;
       height: 30px;
       border: 1px solid red;
       /*第一步： 溢出隐藏 */
       o

			
		

	





	

		

			

				
					
CSS文字超出显示省略号

				
			

			

				

					Rio_Gaven的博客
				

				

					02-21
					
					750
					
				

			

		

		

			
				
这是我平时开发中用的最多的，直接复制粘贴，好用。

			
		

	





	

		

			

				
					
css 溢出隐藏显示省略号

				
			

			

				

					XYX8958的博客
				

				

					11-15
					
					2909
					
				

			

		

		

			
				
限制在一个块元素显示的文本的行数。CSS3引入了-webkit-line-clamp。属性，这是一个非标准的属性，需要结合。：设置弹性盒子的方向为垂直。：在文本溢出时显示省略号。以隐藏超出容器的内容。：隐藏超出容器的部分。

			
		

	





	

		

			

				
					
CSS文本超出2行就隐藏并且显示省略号

				
			

			

				

					01-19
				

			

		

		

			
				
 //溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？ 超出两行隐藏: css3解决了这个问题，解决方法如下： display:-webkit-box; //将对象作为...

			
		

	





	

		

			

				
					
CSS文本超出指定宽度后隐藏并显示为省略号的实现方法

				
			

			

				

					09-24
				

			

		

		

			
				
根据标题和描述，以及提供的部分内容，我们可以了解关于CSS文本超出指定宽度后隐藏并显示为省略号的实现方法，以及相关的知识点。以下详细说明：  1. CSS中实现文本溢出显示省略号的基本属性组合：  - `text-...

			
		

	





	

		

			

				
					
CSS实现文本超出隐藏并显示省略号

				
			

			

				

					everfoot的博客
				

				

					10-02
					
					1764
					
				

			

		

		

			
				
通过结合使用和这三个CSS属性，我们可以轻松地在CSS中实现文本超出隐藏并显示省略号的效果。这一技巧在处理长文本、保持页面整洁和美观方面非常有用。希望本文的介绍和示例能帮助你更好地理解和应用这一技术。

			
		

	





	

		

			

				
					
css文本显示省略号

				
			

			

				

					郑永锐的博客
				

				

					10-11
					
					423
					
				

			

		

		

			
				
css文本显示省略号

			
		

	





	

		

			

				
					
单行／多行文本溢出的省略样式

				
			

			

				

					m0_50125215的博客
				

				

					08-25
					
					314
					
				

			

		

		

			
				
在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号
1. 单行文本溢出
text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本
white-space：设置文字在一行显示，不能换行
overflow：文字长度超出限定宽度，则隐藏超出的内容

.ellipsis { 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    

			
		

	





	

		

			

				
					
CSS 超出部分显示省略号

				
			

			

				

					热爱思考、活力满满、开朗爱笑的年轻人
				

				

					11-11
					
					4万+
					
				

			

		

		

			
				
直接看代码：&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang=&amp;quot;en&amp;quot;&amp;gt;
&amp;lt;head&amp;gt;
    &amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;gt;
    &amp;lt;title&amp;gt;desktop de

			
		

	





	

		

			

				
					
CSS 内容超出显示省略号

					
最新发布

				
			

			

				

					2203_75479159的博客
				

				

					04-27
					
					884
					
				

			

		

		

			
				
推荐在移动端或 WebKit 内核环境使用，其他场景可考虑后端截断或 JavaScript 方案。在 CSS 中实现内容超出显示省略号，主要通过控制文本溢出行为来实现。根据需求选择合适方案，单行场景推荐优先使用。若元素默认是行内元素（如。

			
		

	





	

		

			

				
					
CSS 文字超出省略

				
			

			

				

					weixin_48929505的博客
				

				

					12-12
					
					958
					
				

			

		

		

			
				
css文字超出省略，不换行

			
		

	





	

		

			

				
					
css文本超出显示省略号

				
			

			

				

					05-14
				

			

		

		

			
				
你可以使用 CSS 的 `text-overflow` 属性来实现文本超出显示省略号的效果。具体实现方式如下：

```css
/* 限制文本显示一行 */
.your-element {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 溢出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
}
```

如果要限制文本显示多行，可以结合使用 `display` 和 `line-clamp` 属性，具体实现方式如下：

```css
/* 限制文本显示两行 */
.your-element {
  display: -webkit-box; /* 将元素变为弹性盒子 */
  -webkit-box-orient: vertical; /* 设置弹性盒子为垂直方向 */
  -webkit-line-clamp: 2; /* 限制显示两行 */
  overflow: hidden; /* 溢出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
}
``` 

需要注意的是，`line-clamp` 属性是 CSS3 新增的属性，目前只在部分浏览器中支持。在不支持 `line-clamp` 属性的浏览器中，可以考虑使用 JavaScript 或者服务器端来处理文本超出显示省略号的效果。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 15

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值