为什么绝对定位元素在没有达到最大宽度时就开始换行?
站长
· 阅读数 10
为什么绝对定位元素没有达到最大宽度时就开始换行?
代码在这里：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;
}回复
1个回答
test
2024-06-19
- 这个
absolute定位的元素在水平方向上和它的包含块（就是那个relative定位的元素）没有交集了，也就说它的最大宽度为0。(通过实验猜测应该是这样，没有在文档中找到对应的说明) - 为什么现在是这个样子呢？因为它的宽度不能小于最小宽度，故最终宽度为最小宽度。尽可能地换行，最长的那个单词的长度就是最小宽度。
- 如果我们设置
word-break: break-word,那么可以在word中的字符处就可以换行，最终得到更小的宽度。 和下面这个问题的情况类似
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引，对解决问题有帮助
- 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容