CSS弹性盒子中弹性子元素文本超出弹性子元素宽或高后导致撑开弹性子元素原本宽或高的解决方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS弹性盒子中弹性子元素文本超出弹性子元素宽或高后导致撑开弹性子元素原本宽或高的解决方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

当使用弹性布局时，设置父容器为弹性容器后，弹性子元素的文本内容超出宽或高后会撑开弹性子元素的原本应该显示的宽高，溢出父容器，只要设置弹性子元素的宽或高（由父容器弹性排列方向决定）的属性值为0即可解决

设置父容器弹性排列方向为横向从左到右排列，未设置子元素宽属性值

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
	<style>
	#box{
		width:500px;
		height:500px;
		background-color:#2196f31a;
		display:flex;/*设置父容器为弹性盒子*/
		flex-direction:row;/*设置父容器中弹性子元素的排列方向：从左到右*/
	}
	
	.box-1{
		flex:1;/*设置弹性子元素在弹性排列方向的占比*/
		height:100px;
		background-color:#FFEB3B;
	}
	.box-2{
		flex:2;/*设置弹性子元素在弹性排列方向的占比*/
		height:100px;
		background-color:#FFC107;
	}
	
	</style>
  </head>
  <body>
    <div id="box">
		<div class="box-1">
		11111111111111111111111111111111111111111
		</div>
		<div class="box-2">
		22222222222222222222222222222222222222222
		</div>
	</div>

   
  </body>
</html>

渲染样式

CSS弹性盒子中弹性子元素文本超出弹性子元素宽或高后导致撑开弹性子元素原本宽或高的解决方法,前端,css,css3,前端,html

设置弹性子元素的宽为0解决问题

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
	<style>
	#box{
		width:500px;
		height:500px;
		background-color:#2196f31a;
		display:flex;/*设置父容器为弹性盒子*/
		flex-direction:row;/*设置父容器中弹性子元素的排列方向：从左到右*/
	}
	
	.box-1{
		flex:1;/*设置弹性子元素在弹性排列方向的占比*/
		width:0;/*设置排列方向对应的宽或高的值为0，防止文本溢出导致撑开弹性子元素的原本设定宽或高*/
		height:100px;
		background-color:#FFEB3B;
	}
	.box-2{
		flex:2;/*设置弹性子元素在弹性排列方向的占比*/
		width:0;/*设置排列方向对应的宽或高的值为0，防止文本溢出导致撑开弹性子元素的原本设定宽或高*/
		height:100px;
		background-color:#FFC107;
	}
	
	</style>
  </head>
  <body>
    <div id="box">
		<div class="box-1">
		11111111111111111111111111111111111111111
		</div>
		<div class="box-2">
		22222222222222222222222222222222222222222
		</div>
	</div>

   
  </body>
</html>

渲染样式

CSS弹性盒子中弹性子元素文本超出弹性子元素宽或高后导致撑开弹性子元素原本宽或高的解决方法,前端,css,css3,前端,html
文本溢出部分换行或者隐藏即可

设置父容器为弹性盒子且排列方向为竖直从上到下时，未设置高度为0

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
	<style>
	#box{
		width:500px;
		height:500px;
		background-color:#2196f31a;
		display:flex;/*设置父容器为弹性盒子*/
		flex-direction:column;/*设置父容器中弹性子元素的排列方向：从上到下*/
	}
	
	.box-1{
		flex:1;/*设置弹性子元素在弹性排列方向的占比*/
		width:100px;
		writing-mode: vertical-lr;/*文本纵向排列*/
		background-color:#FFEB3B;
	}
	.box-2{
		flex:2;/*设置弹性子元素在弹性排列方向的占比*/
		width:100px;
		writing-mode: vertical-lr;/*文本纵向排列*/
		background-color:#FFC107;
	}
	
	</style>
  </head>
  <body>
    <div id="box">
		<div class="box-1">
		11111111111111111111111111111111111111111
		</div>
		<div class="box-2">
		22222222222222222222222222222222222222222
		</div>
	</div>

   
  </body>
</html>

渲染样式

CSS弹性盒子中弹性子元素文本超出弹性子元素宽或高后导致撑开弹性子元素原本宽或高的解决方法,前端,css,css3,前端,html

设置高度为0

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
	<style>
	#box{
		width:500px;
		height:500px;
		background-color:#2196f31a;
		display:flex;/*设置父容器为弹性盒子*/
		flex-direction:column;/*设置父容器中弹性子元素的排列方向：从上到下*/
	}
	
	.box-1{
		flex:1;/*设置弹性子元素在弹性排列方向的占比*/
		width:100px;
		height:0;/*设置弹性子元素高度为0，防止文本溢出导致撑开弹性子元素原本设定的高度*/
		writing-mode: vertical-lr;/*文本纵向排列*/
		background-color:#FFEB3B;
	}
	.box-2{
		flex:2;/*设置弹性子元素在弹性排列方向的占比*/
		width:100px;
		height:0;/*设置弹性子元素高度为0，防止文本溢出导致撑开弹性子元素原本设定的高度*/
		writing-mode: vertical-lr;/*文本纵向排列*/
		background-color:#FFC107;
	}
	
	</style>
  </head>
  <body>
    <div id="box">
		<div class="box-1">
		11111111111111111111111111111111111111111
		</div>
		<div class="box-2">
		22222222222222222222222222222222222222222
		</div>
	</div>

   
  </body>
</html>