div显示过长，截断并展示...的css操作

最新推荐文章于 2024-06-23 16:00:00 发布
最新推荐文章于 2024-06-23 16:00:00 发布
阅读量1.2k 收藏
点赞数
分类专栏： CSS 文章标签： css html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/art_people/article/details/121396478
版权

1、首先div要有宽度

2、设置div的样式为

.div{
    width:宽度;
    overflow:hidden; //超长部分不显示
    text-overflow:ellipsis;//超长显示...
    white-space: nowrap;//不折行显示
}


                

        

    

  



    


                



	

		

			

				
					
div+CSS设置一行内文字超过宽度不换行且不显示截断文字加...

				
			

			

				

					09-25
				

			

		

		

			
				
这段CSS代码定义了一个类名为`.text-overflow`，当一个元素应用了这个类时，其内部文本就会在一行内显示并且超出部分会以省略号显示，而不是换行显示。  对于表格，如果想实现类似的效果，需要对表格的宽度以及表格...

			
		

	



                

            
              



	

		

			

				
					
DIV多行文字显示不下溢出时显示...的css样式

				
			

			

				

					09-25
				

			

		

		

			
				
在这篇内容中，我们将会深入探讨如何使用CSS样式控制DIV中的多行文本溢出显示省略号。这是一种非常实用的技术，在网页设计中尤为常见，特别是在需要显示文章摘要或者列表项时。通过设定特定的CSS属性，我们可以在...

			
		

	



              


  
              

                


	

		

			

				
					
css div横屏超长滚动,CSS实现DIV超长截断，并显示...

				
			

			

				

					weixin_42389522的博客
				

				

					08-04
					
					665
					
				

			

		

		

			
				
DIV显示内容有时会超长，并把页面撑的很难看，以前的做法是在JS中，或者后台判断其长度，过长就截断，但由于中英文数字展示的宽度并不一样，截断的长度也就只能取最小值，展示的效果也不好。利用CSS提供的方法，可以完美的解决该问题。.project-Name{width:280px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;}这...

			
		

	





	

		

			

				
					
vue  文本内容超长截取显示... 悬浮提示全部

				
			

			

				

					qq_40779999的博客
				

				

					12-23
					
					3434
					
				

			

		

		

			
				
项目使用vue+element UI 根据文本内容长度 进行悬浮提示 （内容过长截取内容显示... 并在鼠标悬浮的时候显示全部），如果内容没有超长就不需要进行截取显示


代码内容:


<template>
  <div :style="{'width':width}" ref="nariTootip" class="nariTootip">
    <div class="card-carousel--card--footer  pointer " @mouseente..

			
		

	



		

			
		



	

		

			

				
					
html div超出不被截断,高分求：DIV要么撑破，要么就被截断隐藏。怎么才能根据长短自适应显示呢_html/css_WEB-ITnose...

				
			

			

				

					weixin_32441957的博客
				

				

					06-27
					
					563
					
				

			

		

		

			
				
在CSS内的DIV定义如下div,li,td,p,select,input,textarea,a,button,input{font:12px Verdana, Arial, Helvetica, sans-serif;color:#505050;text-decoration: none;overflow:hidden;word-break:break-all;word-wrap: break-...

			
		

	





	

		

			

				
					
关于div中数值太长,超出的处理方式总结

				
			

			

				

					蓝色忧郁
				

				

					02-28
					
					5915
					
				

			

		

		

			
				
div中的数字长度过长,溢出了div的长度,总结两种解决方案

1.设置div属性

1.1)设置title属性,可以鼠标悬浮展示数据 
1.2)设置div的属性width:100px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;...

			
		

	





	

		

			

				
					
html div内文字过长,使用CSS截断过长标题文字的方法

				
			

			

				

					weixin_28987547的博客
				

				

					06-10
					
					916
					
				

			

		

		

			
				
我们在浏览网页的时候，常常会看到某些网站的文章标题由于过长而只显示一部分，另一部分用省略号来表示，这是为了防止标题过长而导致页面排版不好看。那么这个文章标题省略号是如何实现的呢？目前常见的方法是通过动态语言程序来控制，判断标题的长度，然后截取部分来显示，其余的用省略号显示，这样往往在英文和中文的长度上难以判断。今天在网上看到可以用CSS来实现，效果还不错，拿来分享。CSS实现截断过长标题文字的原理...

			
		

	





	

		

			

				
					
div+CSS设置一行内文字超过宽度不换行且不显示截断文字加…

				
			

			

				

					12-13
				

			

		

		

			
				
当一行文字超过DIV或者Table的宽度的时候，浏览器中默认是让它换行显示的，如果我们不想让他换行显示那要怎么办呢？看到这个标题很容易就会想到截断文字加“…”的做法。  一般的文字截断(适用于内联与块)： =======...

			
		

	





	

		

			

				
					
通过纯CSS样式实现DIV元素中多行文本超长自动省略号

				
			

			

				

					12-13
				

			

		

		

			
				
在CSS中，实现一个DIV元素内多行文本超长时自动截断并显示省略号的效果，是一项常见的需求。这通常用于保持布局整洁，尤其是在有限的空间内展示大量文本的情况。以下是一个详细介绍如何通过纯CSS来完成这一任务的...

			
		

	





	

		

			

				
					
css实现字符串截断并加省略号示例

				
			

			

				

					09-25
				

			

		

		

			
				
在网页设计中，有时我们需要对过长的文本内容进行截断处理，以便适应有限的显示空间，同时保留信息的关键部分。CSS（Cascading Style Sheets）提供了强大的样式控制能力，其中包括字符串截断并添加省略号的功能。这...

			
		

	





	

		

			

				
					
css字符截断，div及table的方法

				
			

			

				

					新页小苗
				

				

					05-12
					
					177
					
				

			

		

		

			
				
&lt;style type="text/css"&gt;  table { border:solid 1px #000000; table-layout:fixed;} td { white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} div { border:solid 1px #000000; white-space:now...

			
		

	





	

		

			

				
					
div实现截取的数据长度

				
			

			

				

					stonezhuzisgu的专栏
				

				

					09-12
					
					915
					
				

			

		

		

			
				
很多时候，我们希望一些文字(比如网站首页新闻块的标题),在一行内显示，并且超出它的长度范围时，则加...省略，并且出现提示。     我们通常的解决方法是在服务器端判断内容的长度，超出多少个字符则截断，并添加title提示。asp代码类似如下：       if   len(mystr)>20   then     response.write   ""   &   left(mystr,17) 

			
		

	





	

		

			

				
					
div自动换行及截断文本

				
			

			

				

					weixin_36094484的博客
				

				

					07-06
					
					1814
					
				

			

		

		

			
				
之前在vue上模拟对话框，动态生成的div里内容没有自动换行，找到一个解决办法是css加word-wrap样式：
word-wrap：break-word；行末会把单词作为整体切换到下一行；
另外还有一个word-break：break-all;把单词截断到下一行。
怕忘记，先记在这里。

.truncate{
width:100px;
overflow:hidden;
text-overflow

			
		

	





	

		

			

				
					
CSS - 02 盒模型，浮动，分割div，定位

				
			

			

				

					weixin_43734992的博客
				

				

					04-13
					
					715
					
				

			

		

		

			
				
盒模型：box-model


CSS认为每个html元素都可以看作一个盒子,从而对盒子进行尺寸和方位的修改，但一般是指块元素



从内到外，分为内容区域，内边距，边框，外边距
默认尺寸是作用在内容区域上的
块元素振勇的总空间：内容区域+内边距+边框+外边距



示例：index.css
@charset "utf-8";
 #myul{
	/* 内容区域 */
	width: 300px;
	height: 200px;
	background-color: pink;
	/* 盒模型相关样式 */


			
		

	





	

		

			

				
					
CSS实现DIV超长截断，并显示...

				
			

			

				

					weixin_30596165的博客
				

				

					03-17
					
					909
					
				

			

		

		

			
				
DIV显示内容有时会超长，并把页面撑的很难看，
以前的做法是在JS中，或者后台判断其长度，过长就截断，
但由于中英文数字展示的宽度并不一样，截断的长度也就只能取最小值，
展示的效果也不好。利用CSS提供的方法，可以完美的解决该问题。

1 .project-Name{
2     width:280px; 
3     overflow:hidden; 
4     text-ov...

			
		

	





	

		

			

				
					
div显示过长，截断并展示...

				
			

			

				

					xiansibao的博客
				

				

					11-16
					
					269
					
				

			

		

		

			
				
/不换行展示，否则超长后会进行换行展示。div设置宽度，然后设置css样式。

			
		

	





	

		

			

				
					
CSS文本溢出截断省略

					
最新发布

				
			

			

				

					太阳当空照，花儿对我笑，微风轻轻拂，心情无限好。
				

				

					06-23
					
					1785
					
				

			

		

		

			
				
文本溢出截断省略是比较常见的业务场景，主要分为单行文本溢出截断省略与多行文本溢出截断省略，单行的截断方案比较简单，多行截断相对比较复杂。单行文本溢出截断省略直接使用即可，其无兼容问题，文本溢出范围才显示省略号，否则不显示省略号，省略号位置显示刚好，但是只能作为单行文本溢出截断省略的解决方案。
多行溢出省略
按行计算 CSS方案
多行文本溢出截断省略按行计算使用，其文本溢出范围才显示省略号，否则不显示省略号，省略号位置显示刚好，但是兼容性一般，属性只有内核的浏览器才支持,多适用于移动端页面，因为移动设备浏览器

			
		

	





	

		

			

				
					
div实现一行超出以...显示

				
			

			

				

					qq_41309961的博客
				

				

					02-17
					
					1349
					
				

			

		

		

			
				
div实现一行超出以...显示

			
		

	





	

		

			

				
					
CSS设置div或span中文字超出显示省略号

				
			

			

				

					qq_31790023的博客
				

				

					09-17
					
					2565
					
				

			

		

		

			
				
首先设置宽度，然后让超出的部分隐藏
如果有超出则在最后显示省略号
让文本不换行

具体css代码为：


.title{

width:200px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
word-break:keep-all;

}


...

			
		

	





	

		

			

				
					
css 超出长度显示...

				
			

			

				

					08-28
				

			

		

		

			
				
您可以使用CSS的文本溢出属性来处理超出长度的文本。以下是一种常用的方法：

```css
.overflow {
  width: 200px; /* 设置容器宽度 */
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分使用省略号显示 */
}
```

然后，在HTML中将超出长度的文本放置在具有`.overflow`类的元素中：

```html
<div class="overflow">这是一个超出长度的文本示例</div>
```

这样，当文本长度超过容器宽度时，尾部的部分将被隐藏，并且使用省略号（...）表示被截断的内容。您可以根据需要调整容器宽度和其他样式。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值