CSS基础：text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程

最新推荐文章于 2023-07-03 15:55:35 发布
最新推荐文章于 2023-07-03 15:55:35 发布
阅读量102 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/zccfun/p/6069401.html
本文介绍如何使用CSS属性来优雅地处理文本溢出问题，包括单行和多行文本的截断及省略号显示，适用于网页布局中对文本长度有特定限制的情况。

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

4要素：



width: 125px;  //宽度必须




text-overflow: ellipsis/clip; //省略号或裁剪；




white-space: nowrap;//强制内容在一行显示;




overflow: hidden; // 超出隐藏




多行




text-overflow: ellipsis;




-webkit-line-clamp: 2;




display: -webkit-box;//必须




-webkit-box-orient: vertical;//必须






 


转载于:https://www.cnblogs.com/zccfun/p/6069401.html

                

        




    

    
  



    



                



	

		

			

				
					
通过text-overflow: ellipsis实现省略号截断多行文本

				
			

			

				

					weixin_41455464的博客
				

				

					06-27
					
					141
					
				

			

		

		

			
				
这三个点，看似简单，却蕴藏着前端开发者们对用户体验的体贴，对设计美学的追求，以及对CSS属性的巧妙运用。但是，人类的欲望是无穷的，单行文本的胜利，并不能满足前端开发者们对更复杂布局的需求。聪明的开发者们发挥创造力，利用CSS的各种特性，创造出一些“Hack”式的方法来实现多行文本的截断。想象一下，你正在设计一个商品列表，商品名称太长，超出容器宽度，如果直接截断，可能会让用户摸不着头脑。它告诉我们，在有限的空间内，如何优雅地呈现信息，如何激发用户的兴趣，如何提升用户体验。没有最好的方案，只有最适合的方案。

			
		

	



                

            
              



	

		

			

				
					
表格里使用text-overflow后不能隐藏超出的文本的解决方法

				
			

			

				

					12-13
				

			

		

		

			
				
在w3cschool中css3中有个文本相关的属性text-overflow，当把它设为ellipsis时文本溢出内容就能显示为省略标记，而设为clip时就能把文本溢出的部分裁切掉，当然，前提是设置好两个属性，那就是white-space:nowrap（强制文本在一行内显示）及overflow:hidden（溢出内容为隐藏），也就是要同时有 
复制代码代码如下: { text-overflow:ellipsis或clip; white-space:nowrap; overflow:hidden; } 
因为之前有用过不少次这个属性，而且用得也都很顺利，所以最近在弄一些table的时候遇到了td

			
		

	



              


  
              

                


	

		

			

				
					
使用text-overflow:ellipsis实现溢出文本省略号显示无需js

				
			

			

				

					yang295242361的博客
				

				

					03-07
					
					288
					
				

			

		

		

			
				
即设置样式 style="text-overflow:ellipsis; white-space: nowrap; overflow: hidden;" 后测试成功 相比js方式不仅简便了许多而且会根据元素的宽度自适应 IE 8+，chrome 30，火狐26，测试通过.bulletin-wrapper{
  padding: 0 22px 0 12px
  white-space: nowrap...

			
		

	





	

		

			

				
					
CCS3属性之text-overflow:ellipsis;的用法和注意之处

				
			

			

				

					thingir的博客
				

				

					01-20
					
					433
					
				

			

		

		

			
				
CCS3属性之text-overflow:ellipsis;的用法和注意之处 
语法：text-overflow：clip | ellipsis默认值：clip适用于：所有元素clip： 当对象内文本溢出时不显示省略标记（…），而是将溢出的部分裁切掉。  
ellipsis： 当对象内文本溢出时显示省略标记（…）。在使用的时候，有时候发现不会出现省略标记效果，经过测试发现，使用ellipsis的时候

			
		

	



		

			
		



	

		

			

				
					
CSS文本溢出显示省略号

				
			

			

				

					Jk200165的博客
				

				

					07-03
					
					1万+
					
				

			

		

		

			
				
（用来限制在一个块元素显示的文本的行数，2 表示最多显示 2 行。为了实现该效果，它需要组合其他的 WebKit 属性）-webkit-box-orient: vertical;（和 1 结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 ）text-overflow: ellipsis;（多行文本的情况下，用省略号 “…display: -webkit-box;（和 1 结合使用，将对象作为弹性伸缩盒子模型显示 ）（文本溢出限定的宽度就隐藏内容）

			
		

	





	

		

			

				
					
css 文本溢出时在开头（左边）显示省略号

				
			

			

				

					elewen110的专栏
				

				

					07-15
					
					4212
					
				

			

		

		

			
				
1. 首先设置溢出文本显示省略号:


.el-select__tags-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

2. 然后设置让文本从右到左显示（注意需要设置到最后一个层级的选择器上，举例来说，如果 dom层级是 div > p > span，则必须设置到 span 上；如果设置到了 div 或者 p 上面，则可能导致文字既没有倒序显示，也没有顺序显示，而是错乱.

			
		

	





	

		

			

				
					
使用text-overflow:ellipsis实现文字超出用省略号显示

				
			

			

				

					09-25
				

			

		

		

			
				
例如，通过JavaScript可以获取到容器的实际宽度和内部文本的实际长度，从而在文本末尾手动插入省略号，而不必依赖于CSS的 `text-overflow` 属性。  对于文章开头提到的“感兴趣的朋友可以参考下”的示例，可能是指在...

			
		

	





	

		

			

				
					
CSS省略号text-overflow超出溢出显示省略号

				
			

			

				

					12-04
				

			

		

		

			
				
标题和描述中提到的“CSS省略号text-overflow超出溢出显示省略号”是指在CSS样式中利用`text-overflow: ellipsis;`来实现当文本内容超出指定容器的宽度时，用省略号表示被截断的文本。  `text-overflow`属性有以下几...

			
		

	





	

		

			

				
					
解决text-overflow: ellipsis；不生效的问题

					
热门推荐

				
			

			

				

					张晨光老师的播客
				

				

					03-21
					
					8万+
					
				

			

		

		

			
				
按照text-overflow: ellipsis;使用规则，在标签样式中添加该属性未生效，例如：写道.text {text-overflow: ellipsis;}<div class="text">长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字</div>    之后，发现并没有达到我们想要的预期效果，其实还需要另外2个...

			
		

	





	

		

			

				
					
CSS3属性之text-overflow:ellipsis详解

				
			

			

				

					u013084331的博客
				

				

					03-14
					
					4万+
					
				

			

		

		

			
				
1.语法:text-overflow:clip|ellipsis
默认值:clip;
适用于:所有元素
clip:当前对象内文本溢出时不显示省略标记(...),而是将溢出部分裁剪。
ellipsis:当对象内文本一处时显示省略标记(...)。
当然这还是不够的，需要加点调料才能出现效果:
那就是配合
overflow:hidden
white-space:overflow;
效果

			
		

	





	

		

			

				
					
关于CSS中text-overflow的使用问题

				
			

			

				

					阿猫搬砖丶
				

				

					01-08
					
					2273
					
				

			

		

		

			
				
关于CSS中text-overflow的使用问题

text-overflow属性有三种值：





值
描述




clip
单纯裁剪文本，与overflow：hidden效果一致


ellipsis
以“…”来代表被裁剪的文本


string
使用给定的字符串来代表被修剪的文本（只在Firefox 浏览器有效）


但需要注意的是，text-overflow若想达到预期的在溢出部分添加...

			
		

	





	

		

			

				
					
text-overflow:ellipsis在多行的实现

				
			

			

				

					wang_liuyong的博客
				

				

					07-22
					
					9257
					
				

			

		

		

			
				
以下代码实现了指定最多显示4行，超过4行的字，用…代替。



<div class='wrapper'>
    <p class='text'>要指定行数的文本内容</p>
</div>



.text{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webki...

			
		

	





	

		

			

				
					
文字超出div，设置text-overflow:ellipsis不起作用问题

				
			

			

				

					zhouxukun123的专栏
				

				

					07-01
					
					4万+
					
				

			

		

		

			
				
问题描述

单行文字长度超过文本框width值导致换行问题，在设置了overflow : hidden; text-overflow: ellipsis; 仍不起作用



环境：Google浏览器

解决方法

通过设置text-overflow: ellipsis;样式实现以省略号展现超出部分。



CSS 代码

<style type="text/css">
.hideTex...

			
		

	





	

		

			

				
					
text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程

				
			

			

				

					jingtian678的博客
				

				

					08-16
					
					3626
					
				

			

		

		

			
				
 


三者缺一不可，需同时应用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果：

 


li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden...

			
		

	





	

		

			

				
					
设置text-overflow: ellipsis后引起的文本对齐问题

				
			

			

				

					圆子mom的博客
				

				

					10-26
					
					2842
					
				

			

		

		

			
				
<p>
  <span class="left">Hello Hello Hello</span>
  <span class="right">xhaha</span>
</p>p{
  width: 40%;
  margin: 20px auto;
  font-size: 50px;
}
span{
  display: inline-block;
}
.left{
  width:40%;

			
		

	





	

		

			

				
					
text-overflow: ellipsis；单行，多行文本溢出显示 . . .

				
			

			

				

					前端小狮的博客
				

				

					04-11
					
					3万+
					
				

			

		

		

			
				
常见的单行文本溢出显示省略号 写法：text-overflow: ellipsis;overflow: hidden;white-space: nowrap;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="utf-8" /&gt;
        &lt;title&gt;&lt;/ti..

			
		

	





	

		

			

				
					
CSS3 Text-overflow截取文字显示...

				
			

			

				

					wuyou1336的博客
				

				

					02-28
					
					7445
					
				

			

		

		

			
				
转载 http://www.w3cplus.com/content/css3-text-overflow


CSS3中Text
 Effects属性一共有三个；text-shadow;text-overflow;word-wrap。其中text-shadow是CSS3中一个常用的属性，在《CSS3
 text-show》中专门介绍了关于text-shadow的特性和使用方法。今天主要跟

			
		

	





	

		

			

				
					
微信小程序css没有设置text-overflow: ellipsis; 但是显示省略号了，为什么？

					
最新发布

				
			

			

				

					07-16
				

			

		

		

			
				
首先，用户的问题是：“请问微信小程序中未设置text-overflow ellipsis却显示省略号的原因”。意思是，在微信小程序中，即使没有设置 text-overflow: ellipsis;，文本仍然显示省略号。  从系统级指令中，我需要： - ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值