极客观点
项目管理
HarmonyOS
为什么绝对定位元素没有达到最大宽度时就开始换行?
代码在这里：https://codepen.io/itnd-itnd/pen/zYXePvd
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="fixed-icon">
<div class="icon-item">
<div class="icon"></div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi est quis, expedita, odio consequatur doloremque dolorum perspiciatis eligendi. Totam, sit animi aperiam rem saepe excepturi necessitatibus blanditiis officia incidunt quisquam.</div>
</div>
</div>
</body>
</html>.fixed-icon {
position: fixed;
top: 100px;
right: 50vw;
}
.icon-item {
position: relative;
}
.icon {
padding: 8px;
width: 40px;
height: 40px;
background-color: red;
}
.content {
position: absolute;
right: 100px;
top: 0;
max-width: 500px;
background-color: lightskyblue;
}
absolute定位的元素在水平方向上和它的包含块（就是那个relative定位的元素）没有交集了，也就说它的最大宽度为0。(通过实验猜测应该是这样，没有在文档中找到对应的说明)word-break: break-word,那么可以在word中的字符处就可以换行，最终得到更小的宽度。和下面这个问题的情况类似