text-overflow: ellipsis 多行

最新推荐文章于 2023-07-26 17:22:05 发布
最新推荐文章于 2023-07-26 17:22:05 发布
阅读量5.8k 收藏
点赞数
分类专栏： CSS

elipsis 多行情况出现点点点 很实用 ，虽然只能支持chome    -webkit-line-clamp: 2;-webkit-box-orient: vertical;



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .container{

            width:200px;

        

            overflow: hidden;

             display: -webkit-box;

            -webkit-line-clamp: 2;

            -webkit-box-orient: vertical;

            word-break: break-all;

        }

    </style>

</head>

<body>

<div class="container">

    你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好

</div>

</body>

</html>



兼容其它浏览器 使用js代码实现

 

 

 

 


 
 


 
 


 
 

<!DOCTYPE html>
 

<html lang="en">
 

<head>
 

    <meta charset="UTF-8">
 

    <title></title>
 


 
 

    <style>
 

        #container {
 

            height: 50px;
 

            line-height: 25px;
 

            overflow: hidden;
 

            width:100px;
 

            border:1px solid black;
 

        }
 

        #text{
 

            margin:0px;
 

            padding:0px;
 

        }
 

    </style>
 

</head>
 

<body>
 

<div id="container">
 

    <p id="text">
 

        你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>
 

</div>
 


 
 

<script>
 

        var divH = document.getElementById("container").clientHeight;
 

        var p = document.getElementById("text");
 

        while (p.clientHeight > divH) {
 

            p.innerText = p.innerText.replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "...");
 

        };
 

</script>
 

</body>
 

</html>
 

 


 
 

参考文档：http://c7sky.com/text-overflow-ellipsis-on-multiline-text.html

                

        

        

    




    

      

        

            

              
                
                  ISaiSai
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
CSS实现单行、多行文本溢出显示省略号（…）

				
			

			

				

					
				

				

					06-16
					
					4万+
					
				

			

		

		

			
				
CSS实现单行、多行文本溢出显示省略号（...）

			
		

	



                

              
                



	

		

			

				
					
探索React-Lines-Ellipsis：优雅地处理多行文本截断

					
最新发布

				
			

			

				

					gitblog_00048的博客
				

				

					04-15
					
					268
					
				

			

		

		

			
				
探索React-Lines-Ellipsis：优雅地处理多行文本截断
项目地址:https://gitcode.com/xiaody/react-lines-ellipsis
在前端开发中，如何优雅地处理长文本展示，尤其是在有限的空间内，是一个常见的挑战。React-Lines-Ellipsis正是这样一个专注于解决这个问题的React组件，它提供了智能的多行文本省略功能。
项目简介
React-...

			
		

	



                


  
              

                


	

		

			

				
					
多行文本溢出显示省略号(…) text-overflow: ellipsis

				
			

			

				

					weixin_30808575的博客
				

				

					08-05
					
					322
					
				

			

		

		

			
				
关于text-overflow 
text-overflow属性规定当文本溢出包含元素时发生的事情。


默认值：
clip

继承性：
no

版本：
CSS3

JavaScript 语法：
object.style.textOverflow="ellipsis"



语法：text-overflow: clip|ellipsis|string;

...

			
		

	





	

		

			

				
					
CSS实现文本显示两行

				
			

			

				

					Depressiom的博客
				

				

					01-29
					
					7847
					
				

			

		

		

			
				
注：word-wrap** 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap。它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient (en-US) 属性设置成 vertical时才有效果。在大部分情况下,也需要设置 overflow 属性为 hidden, 否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号(ellipsis ).

			
		

	



		

			
		



	

		

			

				
					
最多显示2行文字,多余的省略显示。

				
			

			

				

					qq_43532275的博客
				

				

					02-14
					
					1万+
					
				

			

		

		

			
				
前端最多显示2行文字,多余的省略显示。

			
		

	





	

		

			

				
					
css---实现文本超过两行时显示省略号（...）的效果

				
			

			

				

					zyue_1217的博客
				

				

					07-26
					
					1万+
					
				

			

		

		

			
				
如果需要兼容其他浏览器，可以考虑使用JavaScript或其他CSS技术来实现类似的效果。，我们将容器元素设置为仅显示两行文本。当文本超过两行时，将隐藏溢出部分，并通过。是一个非标准的CSS属性，仅在WebKit浏览器上有效。是包裹文本内容的容器元素的类名。

			
		

	





	

		

			

				
					
移动端的text-overflow多行文本溢出显示省略号(…)

				
			

			

				

					12-10
				

			

		

		

			
				
大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;  但是这个属性并不...

			
		

	





	

		

			

				
					
YX-CSS-ToolKit:YX-CSS-ToolKit是一种通用样式的工具包

				
			

			

				

					05-06
				

			

		

		

			
				
 text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}img 图片设定高宽后模糊img { width: 100px; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-...

			
		

	





	

		

			

				
					
cuttr-js:Cuttr 是一个 javascript 插件，使用多种截断方法和自定义省略号截断多行文本内容

				
			

			

				

					08-04
				

			

		

		

			
				
 Cuttr 是一个零依赖、易于使用的 JS / jQuery 库，它可以截断多行文本内容 (Line Clampin') 以适应给定的规范。 它添加了一个类似省略号 (...) 的结尾字符串，以指示可用文本多于当前可见的文本。  多种截断方法 在...

			
		

	





	

		

			

				
					
纯 CSS 实现多行文字截断功能

				
			

			

				

					09-27
				

			

		

		

			
				
对于单行文本的截断，CSS 提供了一个非常方便的属性 `text-overflow: ellipsis`。当文本超出容器宽度时，`text-overflow` 属性会添加省略号以表示被隐藏的内容。为了使此效果生效，还需要设置 `white-space: nowrap`...

			
		

	





	

		

			

				
					
纯CSS实现多行文字截断的示例代码

				
			

			

				

					09-22
				

			

		

		

			
				
 使用`text-overflow: ellipsis`配合`overflow: hidden`和`white-space: nowrap`，可以轻松实现单行文本的截断。这种方法简单且浏览器兼容性好，但仅限于单行文字。   ```css  div {  white-space: nowrap;  ...

			
		

	





	

		

			

				
					
CSS3属性之text-overflow:ellipsis详解

					
热门推荐

				
			

			

				

					u013084331的博客
				

				

					03-14
					
					4万+
					
				

			

		

		

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

			
		

	





	

		

			

				
					
css 文本两行显示，超出省略号表示

				
			

			

				

					piaocanY的博客
				

				

					02-22
					
					1075
					
				

			

		

		

			
				
重点：text-overflow: ellipsis;只对display：inline；起作用
例子：
a{
display:block/inline-block;
width:100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
b{
display:inline; //正确
display：inline-block //错误，b标签里的字超出不能显示省略号（…）
}
//一行
white-space: nowra

			
		

	





	

		

			

				
					
html两行溢出省略号,多行文本溢出显示省略号(...)的方法

				
			

			

				

					weixin_30491017的博客
				

				

					06-03
					
					890
					
				

			

		

		

			
				
现在的浏览器都支持text-overflow:ellipsis属性，用来实现单行文本的溢出显示省略号，但是这个属性并不支持多行文本。那么有没有方法在多行文本上实现同样的效果呢？-webkit-line-clampWebkit支持一个名为-webkit-line-clamp的属性，他其实是一个WebKit-Specific Unsupported Property，也就是说这个属性并不是标准的一部分...

			
		

	





	

		

			

				
					
text-overflow显示单行或多行超出部分显示省略号

				
			

			

				

					qq_34319049的博客
				

				

					01-09
					
					1141
					
				

			

		

		

			
				
今天柠檬的工作都做完了，就翻了翻以前的笔记，回顾一下，正所谓温故而知新，看到了以前写的一个text-overflow:ellipsis;属性，一个很简单，很常见的属性，结果就这么把我难住了、难住了、住了、了，怎么回事呢？
先上代码：
css样式：
.whiteSpace{ 	 width: 200px; 	 height: 105px; 	 white-space: normal; 	 borde...

			
		

	





	

		

			

				
					
css 实现超出两行、多行文字省略号显示

				
			

			

				

					iuvc的博客
				

				

					02-21
					
					1万+
					
				

			

		

		

			
				
在我们日常使用文字超出省略号显示，一般使用overflow: hidden;text-overflow: ellipsis;white-space: nowrap;实现，但是当有需求需要实现两行乃至多行时，该怎么实现呢。

			
		

	





	

		

			

				
					
多行文字text-overflow: ellipsis省略号失效问题

				
			

			

				

					qq_51978639的博客
				

				

					02-03
					
					1241
					
				

			

		

		

			
				
设置了多行文字超出显示省略号的样式，省略号就是不生效，为此折腾了好久。
问题在于设置多行文字显示省略号时，只能指定显示的行数，不能设置高度

			
		

	





	

		

			

				
					
两行或三行（多行）文本溢出显示...不生效

				
			

			

				

					Beamon__的博客
				

				

					09-18
					
					1万+
					
				

			

		

		

			
				
就在刚刚需要在react项目写一个限制文本长度两行，溢出显示省略号的场景，但是没有生效，经过查阅，得到以下解决方法，供参考～

 

初次写法：


.item-title{
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    ...

			
		

	





	

		

			

				
					
CSS文本溢出显示省略号

				
			

			

				

					逆袭的菜鸟X
				

				

					03-12
					
					898
					
				

			

		

		

			
				
<div class="multiline">
   文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略
</div>

这段html不添加样式的显示如下：

文本单行显示，溢出显示省略号
      .oneline {
        overflow: hidden...

			
		

	





	

		

			

				
					
text-overflow: ellipsis; 

				
			

			

				

					08-05
				

			

		

		

			
				
text-overflow: ellipsis是一个CSS属性，用于在文本溢出时显示省略号。该属性可以应用于单行文本溢出和多行文本溢出的情况。对于单行文本溢出，可以使用以下样式：  .text {  width:100px;  overflow: hidden;  ...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值