解决Flex布局关于数字或字母换行失败问题

最新推荐文章于 2024-09-05 01:30:55 发布

IT小白-北极冰雪

最新推荐文章于 2024-09-05 01:30:55 发布

阅读量2.6k

点赞数 3

分类专栏： Web前端文章标签： html css

本文链接：https://blog.csdn.net/qq_22239651/article/details/98937695

版权

Web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<style>
	.body{
		width: 200px;
		height: 200px;
		border: solid 1px red;
		display: flex;
		flex-direction: row;
		margin-bottom:10px ;
	}
	.child1{
		width: 100%;
	}
	.child2{
		width: 100%;
	}
	.child3{
		width: 100%;
	}
</style>
<body>
	<div class="body">
		<div class="child1">12333333333333333333333333333333333333333</div>
	</div>
	<div class="body">
		<div class="child2">实地哦啊活上帝是激动啥奇偶的睡觉奥好滴撒度搜我阿精雕机</div>
	</div>
	<div class="body">
		<div class="child3">
			实地哦啊活上帝是激动啥奇偶的睡觉奥好滴撒度搜我阿精雕机dhsaoidosajdoisajdosiajidojsaiodjsaoijdoajdoijsaoijdaosi
			</div>
	</div>
</body>
</html>

首先上图，效果如下：

可以看到，当文本内容为数字或者字母时候，flex布局无法将数字或字母截断实现换行。此时，我们需要强制换行处理。

    .child1{
		width: 100%;
		word-break: break-all;
	}
	.child2{
		width: 100%;
	}
	.child3{
		width: 100%;
		word-break: break-all;
	}

为child添加word-break属性，效果如下：

IT小白-北极冰雪

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录