解决长文本撑破页面的css

最新推荐文章于 2023-05-06 14:50:36 发布
最新推荐文章于 2023-05-06 14:50:36 发布 · 157 阅读 · 0
文章标签：

#CSS

本文介绍了一种使用CSS控制超长英文或代码自动换行的方法，以防止撑坏页面布局，并提供了实现段落文字两端对齐的技巧。
部署运行你感兴趣的模型镜像

一个超长的网址把这漂亮的界面给撑得变形；

或者

一行超长的代码又把博客界面撑开三亩地；

于是很难看。

在文章的CSS样式处加上以下代码即可：




此代码的目的就是控制超长的英文或代码自动换行以免撑坏版面。



假如你想段落文字的两端刷刷对齐就加上以下代码即可：




                

        




    


      

        
您可能感兴趣的与本文相关的镜像

        

          

            

              Stable-Diffusion-3.5
            

            

              

                
Stable-Diffusion-3.5

                

                    
图片生成

                    
Stable-Diffusion

                

              

              
Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率

            

          

          

            
          

        

      

  



    

      

        

            

              
                
                  iteye_19871
                
              
            

            

                关注
              
            

        

        

          
      

      










                



	

		

			

				
					
css属性使用

				
			

			

				

					dreams_dream的博客
				

				

					08-16
					
					428
					
				

			

		

		

			
				
这是第 {{ i }} 条内容。自定义滚动条可以让界面更加美观统一，提升用户体验。

			
		

	



                

            
              



	

		

			

				
					
用于设置文本过长 撑破css布局：

				
			

			

				

					Allen专栏
				

				

					03-12
					
					733
					
				

			

		

		

			
				
//超过宽度，不换行，文本隐藏
p,span{
   white-space: nowrap;//一行显示，不换行
   text-overflow: ellipsis;

   overflow: hidden;

   max-width: 93%;
}
//超过宽度，自动换行
p,span{
    width: 210px;
    word-break: brea

			
		

	



              


  
              

                


	

		

			

				
					
html中撑破div,CSS_css自动换行 防止撑破div影响排版 ，对于div,p等块级元素正常文字 - phpStudy...

				
			

			

				

					weixin_39770592的博客
				

				

					06-22
					
					220
					
				

			

		

		

			
				
对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行html< id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义< /div >css#wrap{white-space:normal; width:200px; }1.(I...

			
		

	





	

		

			

				
					
简述PC端的宽高自适应问题

				
			

			

				

					weixin_44222157的博客
				

				

					03-31
					
					1024
					
				

			

		

		

			
				
PC端的宽高自适应
宽度自适应（了解）：元素的宽默认是跟随父元素的，  尽量不要规定死；不写默认是100%的父元素的宽度；
后续：宽度100%，根据窗口的宽度不同，作出不同结构变换的响应式网页；
高度自适应；
高度自适应第一种情况：内容撑开父元素
主要针对内容块；（考虑一些版块后期会不会经常性修改）
需求一：当元素的height不去设置或者是设置成auto是（默认），那么height是被内容撑开的...

			
		

	



		

			
		



	

		

			

				
					
【移动端开发 + css】在div里输入文本导致内容溢出手机界面的解决方法

				
			

			

				

					票票的博客
				

				

					05-06
					
					467
					
				

			

		

		

			
				
在div里输入文本导致内容溢出手机界面的解决方法

			
		

	





	

		

			

				
					
css flex布局文字过长，宽度被撑开的解决办法

				
			

			

				

					凉瓜拌面的博客
				

				

					12-25
					
					5312
					
				

			

		

		

			
				
先上问题图

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>flex超出省略问题</title>
	<style>
		.flex{
			display: flex;
		}
		.left{
			flex:1 1 auto;
			background: red;
		}
		.left p{
			width: 100%;
			text-

			
		

	





	

		

			

				
					
css自动换行 防止撑破div影响排版

				
			

			

				

					09-25
				

			

		

		

			
				
总结来说，通过合理使用CSS中的`white-space`、`word-wrap`、`word-break`以及`overflow`属性，可以有效地解决连续英文字符和数字导致的自动换行问题，防止内容撑破容器，保持页面布局的整洁和一致性。对于不同...

			
		

	





	

		

			

				
					
图片自动按比例缩小防止页面被图片撑破特效代码

				
			

			

				

					03-20
				

			

		

		

			
				
当应用于图片时，`max-width: 100%`将确保图片的宽度不会超过其父元素的宽度，从而防止图片撑破页面。  4. **height 自动调整**：在设置`max-width`后，图片的高度会自动按比例调整，保持原始的宽高比，避免图片变形...

			
		

	





	

		

			

				
					
css是如何实现在页面文字不换行、自动换行、强制换行的方法

				
			

			

				

					09-27
				

			

		

		

			
				
这是适合处理含有长单词或者特殊字符的文本，以防止它们撑破容器。  除了上述属性外，还有一些其他方法可以用来处理文本换行的特殊情况： 1. `overflow: hidden;` 结合 `white-space: nowrap;` 可以隐藏溢出的内容，...

			
		

	





	

		

			

				
					
让你的表格不因被内容撑破而变形

				
			

			

				

					12-12
				

			

		

		

			
				
下面是一个具体的例子，展示了如何通过 CSS 样式来创建一个不会因为内容撑破而变形的表格：  ```html <!DOCTYPE html>      , initial-scale=1.0">  不因内容撑破而变形的表格    table {  width: 100%;  table-...

			
		

	





	

		

			

				
					
DEDE内容页图片过大导致布局混乱的解决方法

				
			

			

				

					邹邹s的博客
				

				

					12-22
					
					3032
					
				

			

		

		

			
				
许多使用过DEDE建网站的朋友，可能都会碰到过这样的情况，当我们在一个网站里发表一篇文章时，如果我们使用的图片，其宽度超过内容区域大小，图片就会将表格撑大，同时使得页面布局变得混乱起来。当然，如果懂CSS，我们可以利用css来定义，让超出的部分隐藏起来。不过，这样做的话，图片的美观性就很差，显示不出来超出的部分。
 
      解决这个问题，还有一些朋友，会利用css，使图片在过大后，自动将

			
		

	





	

		

			

				
					
CSS强制换行

				
			

			

				

					weixin_34245082的博客
				

				

					07-23
					
					269
					
				

			

		

		

			
				
CSS强制换行





自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行html<div id="wrap">正常文字的换行...

			
		

	





	

		

			

				
					
防止文章图片过大，撑破页面

				
			

			

				

					system1190的专栏
				

				

					12-28
					
					498
					
				

			

		

		

			
				
=700) window.open(http://image.club.sohu.com/pic/74/e0/zz00571571d6b61bdf0886.jpg);" src="http://image.club.sohu.com/pic/74/e0/zz00571571d6b61bdf0886.jpg" onload="if(this.width>700)this.width=700

			
		

	





	

		

			

				
					
解决DEDE防止图片撑破页面，文章内容中的图片自适应宽度

				
			

			

				

					dawanai5802的博客
				

				

					04-02
					
					289
					
				

			

		

		

			
				
许多使用过DEDE建网站的朋友，可能都会碰到过这样的情况，当我们在一个网站里发表一篇文章时，如果我们使用的图片，其宽度超过内容区域大小，图片就会将表格撑大，同时使得页面布局变得混乱起来。当然，如果懂CSS，我们可以利用css来定义，让超出的部分隐藏起来。不过，这样做的话，图片的美观性就很差，显示不出来超出的部分。解决这个问题，还有一些朋友，会利用css，使图片在过大后，自动将图片缩小，不...

			
		

	





	

		

			

				
					
DedeCMS文章页图片过宽撑破网页的解决办法

				
			

			

				

					dawanai5802的博客
				

				

					04-05
					
					189
					
				

			

		

		

			
				
发布文章时怎样才能自动控制fck编辑器上传的图片的大小？有的用户发布一些非常宽的图片，在显示时会把页面撑坏了。
解决办法：
在后台新添加一个变量 $cfg_fck_imgwidth 我取名为 fck编辑器默认图片宽度 ，变量值设置为400（就是图片得默认宽度）类型选择数值，你可以自由设置，所属组设置为会员。保存后在会员设置里面会出现一个输入框。这样就可以随时更改大小了。
下一步打开...

			
		

	





	

		

			

				
					
word页面不对齐，如何解决？

				
			

			

				

					weixin_30410999的博客
				

				

					06-12
					
					1307
					
				

			

		

		

			
				
http://blog.163.com/haibianfeng_yr/blog/static/34572620201157105439516/
转载于:https://www.cnblogs.com/woxiangxintj/p/4570995.html

			
		

	





	

		

			

				
					
简单解决input内容过长，撑开页面的问题

				
			

			

				

					weixin_30892987的博客
				

				

					05-27
					
					2299
					
				

			

		

		

			
				
在最近做的系统中~
由于要根据浏览器分辨率，动态改变页面内容的宽度，所以 input 就设置了百分比长度。
但当输入的内容长度大于 input 的时候，input 就会将页面撑开。
试了几个办法之后，发现讲 table 的 table-layout 属性设置为 fixed 就可以完美甘解决E个问题。
转载于:https://www.cnblog...

			
		

	





	

		

			

				
					
解决浏览器兼容性：div+css布局问题解析

				
			

			

				

					
				

			

		

		

			
				
为了避免内容撑破浮动容器，开发者需要为这些元素设定合适的宽度。  4. **容器溢出隐藏的处理**  使用`overflow: hidden`可以隐藏超出容器的内容，但在小高度值的div中，不同浏览器的处理方式也可能有差异。例如，`;...

			
		

	



              




          


        

      

      

        
      

      





	

		评论	
	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值