问题描述
当我使用 flex 布局做两栏布局的时候，左侧宽度固定，右侧宽度使用 flex: 1，文字溢出，如图
明显文字溢出了
代码
<!DOCTYPE html>
<html lang="en">
<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>
<body style="width: 1000px;">
<div style="display: flex;">
<div style="width: 60px;">what:</div>
<div style="flex: 1">
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</div>
</div>
</body>
</html>
问题解析
右侧内容为没有空格的纯英文，浏览器会把它当成是一个单词，所以不换行并溢出
解决方案
- 给右侧加 css 使其无论如何都拆分单词
word-break: break-all;
- 不是没有空格的纯英文，就一点事都没有了（当然，这根本不是什么解决方案）
<!DOCTYPE html>
<html lang="en">
<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>
<body style="width: 1000px;">
<div style="display: flex;">
<div style="width: 60px;">what:</div>
<div style="flex: 1">如果我是中文我是不是就万事大吉了 ？？？如果我是中文我是不是就万事大吉了 ？？？如果我是中文我是不是就万事大吉了 ？？？如果我是中文我是不是就万事大吉了 ？？？如果我是中文我是不是就万事大吉了 ？？？</div>
</div>
</body>
</html>
中文
总结
使用 flex 做两栏布局时，在溢出的一栏使用如下 css 使文本内容强行在任意字符间断行就 ok 了
word-break: break-all;
网友评论