让div不换行

最新推荐文章于 2021-04-07 10:41:16 发布
最新推荐文章于 2021-04-07 10:41:16 发布
阅读量94 收藏
点赞数
原文链接：http://www.cnblogs.com/TTTT/archive/2010/03/20/1690357.html
版权
ContractedBlock.gif ExpandedBlockStart.gif 代码 
 
   
 
    /* 
    顶部链接 
    */ 
    
 #container #header #blogname #blogTitle #blogLink 
    { 
    white-space 
    : 
    nowrap 
    ; 
    letter-spacing 
    : 
    0px 
    ; 
     position 
    : 
    absolute 
    ; 
     font-size 
    : 
     12px 
    ; 
    font-weight 
    : 
    normal 
    ; 
    top 
    : 
     9% 
    ; 
     left 
    : 
     34% 
    ; 
     background 
    : 
     #FFFFFF 
    ; 
     border 
    : 
     1px solid black 
    ; 
     padding 
    : 
     1px 10px 1px 10px 
    ; 
     filter 
    : 
    progid:DXImageTransform.Microsoft.Alpha(opacity=70) 
    ; 
     -moz-opacity 
    : 
    .70 
    ; 
     opacity 
    : 
     .70 
    ; 
    } 
    
//其中white-space:nowrap;让div里的内容不换行
 
   
 
  
 
 
 
 
 
 

 

转载于:https://www.cnblogs.com/TTTT/archive/2010/03/20/1690357.html

                

        

        




    

  


    

      

        

            

              
                
                  aren3032
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
通过float实现两个div不换行

				
			

			

				

					09-25
				

			

		

		

			
				
总结来说，`float`属性是实现两个`div`不换行的常见方法，通过设置元素的浮动方向，可以让它们并排放置。尽管有新的布局技术出现，`float`仍然是一个实用的工具，特别是在维护老项目或兼容旧浏览器时。理解并熟练...

			
		

	



                

            
              



	

		

			

				
					
html内容超出了div的宽度如何换行让内容自动换行

				
			

			

				

					01-19
				

			

		

		

			
				
在工作中评论内容测试遇到评论着的评论内容为：“dddddddddddddddddddddddddddddddddddddddddddddddddd”，错误的评论，在显示评论列表的时候因为有固定宽，但是显示的内容超出的了div的宽，在这种情况下我们需要...

			
		

	



              


  
              

                


	

		

			

				
					
css 处理元素空白

				
			

			

				

					lhq_org的专栏
				

				

					05-25
					
					1411
					
				

			

		

		

			
				
body{

white-space: nowrap


}
white-space：的属性





值

描述



normal

默认。空白会被浏览器忽略。



pre

空白会被浏览器保留。其行为方式类似 HTML 中的  标签。



nowrap

文本不会换行，文本会在在同一行上继续，直到遇到  标签为止。

			
		

	





	

		

			

				
					
html div 不换行超出显示省略号

				
			

			

				

					xyw10000
				

				

					06-09
					
					4922
					
				

			

		

		

			
				
.div{font-size:18px; color:#000;line-height:24px;white-space:nowrap;text-overflow:ellipsis;word-break:break-all;overflow:hidden;}

			
		

	



		

			
		



	

		

			

				
					
div不换行的三种方法

				
			

			

				

					hellojoy的博客
				

				

					04-10
					
					2万+
					
				

			

		

		

			
				
https://www.cnblogs.com/robinunix/p/11346126.html

style="display: inline-block"

float


			1

			2

			3

			4

			5

			6

			7

			8

			9

			10
			
			
			<divclass="div1">123</div>...

			
		

	





	

		

			

				
					
设置div不换行

				
			

			

				

					Schaffer的博客
				

				

					04-07
					
					1万+
					
				

			

		

		

			
				
div本身为块级元素，且会换行。
span是行内元素，不会换行。
下面介绍三种方式：
1、浮动
为你的每个DIV设置左浮动即可
<div style="float:left"></div>

2、设置为行标签
<div style="display:inline"></div>

3、设置为行标签，但是具备块标签的属性
<div style="display:inline-block"></div>

扩展：
div内的文本不换行：
添

			
		

	





	

		

			

				
					
html小技巧之td,div标签里内容不换行

				
			

			

				

					10-25
				

			

		

		

			
				
本文将详细讨论如何在`<td>`和`<div>`标签内实现内容不换行的几种方法。  首先，我们来了解一下为什么在`<td>`和`<div>`标签中会出现内容换行的情况。在`<td>`标签中，如果内容长度超过了表格单元格的宽度，浏览器...

			
		

	





	

		

			

				
					
html中div不自动换行、强制不换行的具体实现

				
			

			

				

					09-28
				

			

		

		

			
				
对于不换行的需求，可以让一个`div`元素向左浮动，另一个`div`元素紧接着向右浮动。示例代码如下：  ```html <div class="left">hello</div> <div class="right">world!</div> ```  ```css .left {  float: left; } ...

			
		

	





	

		

			

				
					
html中的div、td 、p 等容器内强制换行和不换行的实现

				
			

			

				

					12-13
				

			

		

		

			
				
这里我们将详细讨论如何实现强制不换行以及自动换行，并分析不同换行方式的区别。  1. **强制不换行并以省略号结尾**  当希望文本在容器内不换行且超出部分以省略号表示时，可以使用以下CSS样式：  ```css  div {  ...

			
		

	





	

		

			

				
					
如何让多个div横向排列而不换行

					
热门推荐

				
			

			

				

					vcxiaohan的博客
				

				

					12-15
					
					6万+
					
				

			

		

		

			
				
现象
多个div排列在一行，包裹的框宽度不足时，那么会换行显示
如图 解决
关键点在于white-space: nowrap;的使用
效果 代码<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-

			
		

	





	

		

			

				
					
div 不换行

				
			

			

				

					回家换拖鞋的专栏
				

				

					09-28
					
					2801
					
				

			

		

		

			
				
1、div里面的多个子div不换行：
.p{
display:inline-block;
}
.p div{
float:left;
display:block;
}


2、单个div里面的内容不换行：
 ① 用nobr标签
不换行不换行
 ② 用nowrap属性
div不换行div不换行div不换行

3、并列的div不换行
 ① 用float属性
    

			
		

	





	

		

			

				
					
怎么可以让div不换行

				
			

			

				

					it_java_com的博客
				

				

					08-12
					
					436
					
				

			

		

		

			
				
div默认属性display: block；//将元素显示为块元素；
你要把他的属性改为inline //将元素显示为内联元素（又称为行内元素）



			
		

	





	

		

			

				
					
DIV强制不换行

				
			

			

				

					qiuyabing的专栏
				

				

					02-18
					
					693
					
				

			

		

		

			
				

DIV强制不换行 (2008-06-04 16:51:03)转载▼
标签： 杂谈
 引自：http://www.21ido.com/blog/post/59.html
让DIV不换行
 
 
一，单个DIV：
1.用nobr元素
Code: 
&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt...

			
		

	





	

		

			

				
					
div横向排列不换行

					
最新发布

				
			

			

				

					10-19
				

			

		

		

			
				
当你想让HTML中的`<div>`元素水平排成一行且不自动换行时，可以设置它们的CSS样式。你可以通过控制`display`, `flex-wrap` 或者 `white-space` 属性来实现这个效果：  1. **块级元素换行**：  如果默认情况下`<div>`...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值